Skip to content
Submitted over 2 years ago

QR code component solution using CSS Grid

erenseven•50
@ErenSeven
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I used three "div" tags to center the gray area on the page and used a "grid" to cover the outermost "div" tag approximately the whole page, and align the "div" tag that covers the gray area vertically and horizontally using "grid". Is there a more practical and effective way to do this?

Community feedback

  • Account deleted

    Hi Eren 👋 Congrats on finishing your first challenge!

    Yes, there is more practical way to do this.

    You have two divs to many. You can delete the div with the class of 'body', and a div with the class 'container'. All you need is a div with a class of 'card'.

    Then you go and add the following code to the body tag. (Not the body class, but the body element):

    min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;

    This code will center your div with the class of 'card'.

    Also, add the background on the body element, like this: body { background-color: hsl(212, 45%, 89%); }

    That should work. I hope it was helpful.

    Keep up the good work! 👨‍💻💪

    Marked as 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