Skip to content
Submitted over 2 years ago

Responsive qr-code-component built with react and tailwindcss

Kyle Johnson•250
@11kyle
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    @elaineleungPosted over 2 years ago

    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

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