Skip to content
Submitted about 2 years ago

CSS and HTML QR Code

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

Centering the card vertically was probably the hardest part. Ended up using a parent 'div' element as a 'flexbox' to center horizontally and vertically. The challenge didn't call for a responsive design, so I wasn't sure if there was supposed to be two solutions one for mobile and one for desktop. I ended up submitting the desktop version. Hopefully, I did't stray too far from what is ideal.

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, Spencer Daniel! 👋

    You are already in the right direction by using flexbox to make the card in the middle of the page and setting a max-width to the card element. The reason why this is a good challenge even though you haven't learned about media queries is that you can make the site responsive without any media queries.

    If you take a look on the mobile view such as 360px * 640px, you will notice that it looks good. But, you can improve it by adding some padding to the body element to prevent the card from touching the edges of the browser.

    I suggest removing the max-height from the card element. Let the content inside it control the height of the card. This way, the card can have more height when it is needed.

    I hope this helps! Keep up the good work! 👍

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