Skip to content
Submitted over 1 year ago

Flexbox

Shea•210
@sh0910
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

My first solution. Image is centered on the page and responsive for both desktop and mobile. Feedback is welcome, thank you!

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋, some of this may interest you:

    • The main content of every page (the card in this case) should be wrapped with the <main> tag.
    • The trick of setting the font size: 62.5%; is no longer commonly recommended because it can cause issues with accessibility and readability.
    • It is better to use min-height: 100vh; as using height causes the page to be cut off in viewports with small height (such as mobile landscape orientation).

    I hope it’s useful : )

    Regards,

    Marked as helpful
    0
    Shea•210
    @sh0910Posted over 1 year ago

    Hi there! Thank you for taking the time to check my code and provide feedback. It is really 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