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

Flexbox

Sheaβ€’ 210

@sh0910

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


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

@fernandolapaz

Posted

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

@sh0910

Posted

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
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