Skip to content
Submitted over 2 years ago

Responsive QR Code Component

Shaun Pour•630
@ShaunPour
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

What are you most proud of, and what would you do differently next time?

I struggled with making the design an exact match and parts of it I left as somewhat unfinished compared to the design. I would probably spend a little more time on redoing the design more precisely for each screen size if I did it again.

What challenges did you encounter, and how did you overcome them?

There wasn't really anything I'd call a challenge but some sections I did have more trouble getting to match up as precisely as I'd like.

What specific areas of your project would you like help with?

N/A

Community feedback

  • Shaun Pour•630
    @ShaunPourPosted over 2 years ago

    Thanks! I was wondering why all these smaller components insist on filling most of the screen.

    0
  • Account deleted

    Give the container a max-width so it doesn't fill the whole screen. And to center the card use flexbox:

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

    To remove the default margin of everything use the following at the beginning of the CSS:

    
*, *::before, *::after {
     padding: 0;
     margin: 0;
}

    That will get rid of unwanted default margins and paddings which will make everything more convenient. * means "all elements".

    0

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