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 Card Component using flexbox

@Alexandre-Simoes361

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


I attempted to simplify my CSS as much as possible to make it more efficient, but if there is anything extraneous or that could have been done just as well with less, please let me know.

Community feedback

P

@Islandstone89

Posted

Hi, good job! You have a <main>, which many people forget to include. Your HTML and CSS is thoughtful and well-structured. Nice use of custom properties!

Just a few small tips...

  • I would also set up the font sizes as variables.

  • I like to use min-height instead of height on the body, I feel that's more flexible.

  • I think, in general, you should rarely set fixed widths and heights on things.

  • To avoid the image getting too large, you can set the following "reset", which I always have at the top of my stylesheet (along the box-sizing: border-box, etc):

img {
  display: block;
  max-width: 100%;
}

All in all, though, well done :)

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