Skip to content
Submitted almost 3 years ago

Responsive qr-code-component built with react and tailwindcss

react, tailwind-css
Kyle Johnson•250
@11kyle
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,360
    @elaineleung

    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

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