Skip to content
Submitted almost 2 years ago

CSS flexbox

Mariana Rainha•50
@marianarainha
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 found it difficult to determine the width based on the design I'm still not sure I found the right proportions.

If anyone has any suggestions for best practices I'm all ears!

Community feedback

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

    Hi, Mariana! 👋

    It is fine if the card's width is having a bit more width or less width than the original design. It is more important to focus on code quality instead.

    Alternative text for the QR code should be human-readable. Also, it should describe about the QR code used for. So, a better alternative text can be "QR code to frontendmentor.io".

    Remove width and height from the <body>. It should always fill the entire page. Treat it as the main element of the web page.

    If you ever need to set a height on the <body>, use min-height instead. It is okay to always set min-height: 100vh as the initial styling for the <body>.

    Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more — The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.

    I hope this helps. Happy coding!

    Marked as helpful
    1
    Mariana Rainha•50
    @marianarainhaPosted almost 2 years ago

    @vanzasetia thank you very much !

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @marianarainha You are welcome! I am glad I could help.

    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