Skip to content
Submitted 6 months ago

QR code challenge

PolternCat•30
@joshuapoc
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?

Using flex helped me the most when it came to centering the main container

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

Pinpointing the sizing for the fonts and centering elements inside the body

What specific areas of your project would you like help with?

Is it correct to set 100vh to the body element? otherwise how can i make use of flexbox for centering the main container inside the body

Any other feedbacks i recieve I would beyond grateful for

Community feedback

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

    hi there! 👋

    It's better to use min-height instead of height. height will prevent users on smaller screens to scroll down if your content is overflowing the 100vh at that screen size. using min-height will center your content, but will still allow users to scroll down in case of overflow.

    Marked as helpful
    1
    PolternCat•30
    @joshuapocPosted 6 months ago

    @kodan96 Thanks for your comment. So will min-height alone fix the overflow problem?. Im working on the omelette recipe challenge and i applied a media query and it seems to work just fine. The problem is the content overflows when i set the width of the portview in the dev´s tools to 200px and below. I implemented overflow-x: hidden; but i believe it will be counterintuitive later on.

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

    @joshuapoc

    I don't think you need to go that far down in screen sizes. I think 375px should be fine for the smallest screen size

    Marked as helpful
    0
    PolternCat•30
    @joshuapocPosted 6 months ago

    @kodan96 Well yes i thought the same. The project itself didnt give me any problems and its responsive as expected. Also i set height: 100vh in the body. The only difference i noticed was the main container being cropped, i solved it by setting height: 100% on the body, but maybe thats wrong...is that why you say min-height is preferred? so that the "cropping" doesnt occur?

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

    @joshuapoc partly, yes

    Marked as helpful
    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