Skip to content
Submitted over 1 year ago

Responsive HTML/CSS, Flexbox used for vertical centering

Ted Rinquest•440
@climb512
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

This was a great, simple project to help me work out my workflow questions around Visual Studio, the Git command line and Github, and to solve a few basic css layout solutions. My first experience with Frontend Mentor has been very valuable -- Thanks to everyone involved!

Community feedback

  • Ted Rinquest•440
    @climb512Posted over 1 year ago

    Thank you for taking the time to look at my code!

    My use of dvh was my attempt to get around this address bar bug in Safari: https://stackoverflow.com/questions/52848856/100vh-height-when-address-bar-is-shown-chrome-mobile

    Since dvh is relatively new unit, I used both the vh and dvh versions as a fallback in certain browsers--although I am not at all sure it is necessary.

    Thanks again for checking it out!

    1
    Tejasva Khandelwal•60
    @tejasva-087Posted over 1 year ago

    @climb512 Oh thankyou for letting me know that.

    0
  • Tejasva Khandelwal•60
    @tejasva-087Posted over 1 year ago

    Hello there, I refered to your code and in the body section instead of using min-height: 100vh; min-height: 100dvh; you could have just used height: 100vh; it would work perfectly

    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