Skip to content
Submitted about 2 years ago

Pricing Card CSS

Irtaza Hyder•30
@SyedMIrtazaHyder
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The CSS part was difficult to manage. What are the best practices for responsive designing?

Community feedback

  • Kawsar Ahmed Fahad•2,660
    @faha1999Posted about 2 years ago

    Hello Irtaza Hyder. Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

    • You might want to use semantic tags like the <main> to wrap your code, instead of div. like
    <main id="main-container">
      <div></div>
</main>
    • You could also make use of <section> and/or <article> semantic tags. This would help improve accessibility.
    body {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
}
    • update the head like this
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">

  <title>Frontend Mentor | Single price grid component</title>
<head>

    I hope this helps you. Happy Coding!

    1
  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @SyedMIrtazaHyder,

    Congrats on completing the challenge

    You can add the following rule to center the card on the page.

    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

    You're also missing the viewport meta tag in the head to allow the page to scale properly. https://www.geeksforgeeks.org/html-viewport-meta-tag-for-responsive-web-design/

    On mobile you can stack the 3 boxes by setting the width: 100%.

    Check the report above there are issues mainly the missing main element and h3 instead of a h1.

    Hope this is helpful

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord