Skip to content
Submitted almost 2 years ago

Flexbox + fixed body height

Farsana Rahim•10
@farsana-fr
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 got help from @Ashxarya Improved by setting window height for body and flexbox to center the card

Community feedback

  • Hassia Issah•50,650
    @HassiaiPosted almost 2 years ago

    The body has a wrong background-image, there is no need to give the body a height value.

    To center .card on the page using flexbox, replace the height in the main with min-height:100vh.

    You forgot to give .card a border-radius value.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    0
    Farsana Rahim•10
    @farsana-frPosted almost 2 years ago

    @Hassiai Thanks for taking your time to go through my code. By giving main 100vh, the footer is moved down, hence I added a height for the body and main Oh sorry I forgot to add the border-radius, thanks for taking a keen look into my solution.

    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