Skip to content
Submitted 6 months ago

Responsive QR Code page using FlexBox

Alexis•30
@AlexisVari127
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

What are you most proud of, and what would you do differently next time?

It's my first time using the @media query, I didn't know about this responsiveness technique until today!

What challenges did you encounter, and how did you overcome them?

I had an issue with the mainContainer element (basically the whole background) growing only as big as the content, although I gave it the style "height: 100%". Then I found out, I'd have to set the style "html,body{ height: 100% }" for the mainContainer to inherit the height.

What specific areas of your project would you like help with?
  1. Is it usual to use style "html, body{ height: 100% }"? I have a personal project I've worked on where I didn't use this style and it still worked.
  2. When should I use the max-width property and when the min-width property in the @media query?

Community feedback

  • Koda👹•3,830
    @kodan96Posted 6 months ago

    hi there! 👋

    1. No, it's not usual and it's not good practice. If you want to center your content using Flexbox, and that's the reason why you want to set height on the body use min-height instead. If you use height and your content overflows (it can't fit in one screen height) on smaller screens, users won't be able to scroll down. min-height will still let them to do so. I've never seen anyone setting height on the html tag itself, but maybe I'm missing smg.

    2. Depends on what's your base style. So where you start. If you build your site using mobile-first workflow, then you should use min-width, otherwise at desktop-first you should use max-width.

    Hope this was helpful 🙏

    Good luck and happy coding! 💪

    0

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