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

Responsive qr-code-component built with react and tailwindcss

@11kyle

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 build was solid but I encountered a display issue on mobile in landscape. I was declaring the parent div height equal to 100vh but the child div was taller. This caused the background color to not be set for the full screen when scrolling to the bottom or past the initial view. I moved the background color to the body element and changed the parent div to have a minimum height of 100vh.

I also noticed that the style guide didn't include the width of the component or other styles like paddings and margins.

Community feedback

Elaine 11,400

@elaineleung

Posted

Hi Kyle, welcome to the FEM community, and congrats on completing your first challenge! 😊

Great job figuring out the bit about min-height, which does make a world of difference. About the sizes for the design, that's all available in the Figma files if you have a Pro account; otherwise, it could be a good exercise actually in training your eye match the dimensions, and this is something I've been practicing. What I normally do is to make sure my working canvas is at the same width as the design reference image, and then I would compare the sizes of the containers by stacking one window on top of the other to measure the width/height at that breakpoint.

Hope to see more solutions, and happy coding! 🙂

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