Skip to content
Submitted over 2 years ago

QR Layout Using Plain CSS and HTML

Spencer Daniel•50
@WhaleMentalist
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

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•910
    @FahatmahPosted over 2 years ago

    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

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