Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR Layout Using Plain CSS and HTML

@WhaleMentalist

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The challenging part was vertically centering the card. I ended up using 'vh' and 'vw' to size the card. I noticed that when I specified height to 100% on card to get to center vertically it didn't work, however, after I had changed from percentage to 'vh' it seemed to work. Other than that I couldn't get it an exact match with the specified font size on the paragraph element (Ended up making it a bit bigger). I do notice that it does not respond to smaller sizes, but the challenge didn't require a responsive design. Hopefully, the solution I chose is NOT terribly done.

Community feedback

Fat 850

@Fahatmah

Posted

Hey there! Nice work!

I see in your code that your body is having height: 100%;, instead of that min-height: 100vh; and use flexbox or grid layout. This layout are used when you want to center your card. For example you can do

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

And then you can give size or padding in your card. I don't think vh unit are suit to size your card because it is basing on the screen size, that is why it gets bigger and not responsive or fluid. I use % and then giving it a max-width or max-height. Or I use rem unit.

Hope this helps! Keep Coding!

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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