Skip to content
Submitted over 1 year ago

QR Code Component using React and Tailwind

Mai•20
@mai-soup
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

I am unsure about my layout on mobile - the viewport height seems to not take into account the browser's navigation bar, therefore the credits are sometimes off-screen and the page needs to be scrolled to view them. Is there a good solution for this?

Community feedback

  • Phenics13•60
    @Phenics13Posted over 1 year ago

    Hi! I have some suggestions:

    • you can make the card smaller (height: 80% - 80% of height of the parent tag) to prevent scroll. However, if your pages may be high enough to scroll, replace height: 100vh to min-heigh: 100vh. It will prevent the page to look offset.
    • Or you can go the other way: make the whole parent div (that contains <QrContainer /> and <AttributionContainer />) display: flex (that you have already done). Than set <QrContainer> root component with property flex: 1. It will stretch your card with maximum height and also contain AttributionContainer in place. Learn more about flex-grow.

    I hope it helps 😊

    0
    Mai•20
    @mai-soupPosted over 1 year ago

    @Phenics13 Hi, thank you for the feedback! The issue was with how browsers implement the definition of "viewport" specifically, not the flexbox or card size. After a bit of fiddling around, I learned that I could replace the "vh" unit with "dvh" to make my root div take up all visible space on mobile as well without any weird scrolling appearing.

    0
    Phenics13•60
    @Phenics13Posted over 1 year ago

    @mai-soup https://caniuse.com/?search=dvh. Be aware that it is quite new feature and old browsers do not support it

    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