Skip to content
Submitted about 2 years ago

QR Code component using HTML, CSS Flexbox

Romina Bonetto•20
@Romina-Bonetto
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Is there a best practice to center the whole content container on the center of the page (horizontal and vertical) without using "margin"? I tried with flexboox but ended up using margin also.

Code

Please log in to post a comment

Log in

Community feedback

  • Khawar Mehfooz•530
    @Khawarmehfooz

    Hi! 👋 Congratulations on completing the challenge!

    I have some suggestions to improve the solution:

    • Add the following CSS properties to the body to properly center the content on the middle of screen:
    height:100vh;
display: grid;
place-items:center:
    • Add the following CSS Properties to .attribution:
    position:absolute;
bottom:0;

    This will place the attribution in bottom.

    Happy coding!

    Marked as helpful
  • CodeBot•200
    @Emperor-Shadow

    When you use flexbox, you have to set the body's height to 100% of the viewport height Then the align items and justify content will work Just like this

    body { height: 100vh; display: flex; justify-content: center; align-items: center; }

    And justify content is to center it horizontally whilst align items is to center it vertical. I wish you all the best Happy coding

    Marked as helpful
  • _nehal💎•6,710
    @NehalSahu8055

    instead of height : 100vh use min-height:100vh

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