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

QR code component with HTML and CSS.

@ana-cassia-invernizzi

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@ledesmx

Posted

Hi Ana 👋

Great job on your solution!

Here are some recommendations for you:

  • I suggest using the min-height property instead of height. If we set height: 100vh; then the body will have 100vh height no matter what. Even if the content spans more than 100vh of viewport (this will result in the component being cut off on smaller screens.) Whereas with min-height it will continue growing.
  • Lastly, there is a margin in your body which is adding more space in addition to the 100vh. I only suggest removing it.

Code to remove:

body {
  height: calc(100vh - 1px);
  margin: 1.25rem;
}

Code to add:

body {
  min-height: 100vh;
}

I hope this helps a little.

Well done for the rest.

Marked as helpful

0

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