Skip to content
Submitted over 1 year ago

Solution using flex-box

Juan Galvez•50
@Galvez121
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Could anyone help me? I tried to center the div in the middle of the website using flex-box justify-content, but It did not work out. I did it using margin instead.

Any bad practice in HTML or CSS? Any changes that would make my code cleaner?

Thank you ^^

Code
Loading...

Please log in to post a comment

Log in

Community feedback

  • FFerDev•30
    @FFerDev

    Greetings ♥. The issue with trying to vertically center the component arises from not giving it a "defined" height. By default, the height will adjust to the height of its contents, meaning it will only occupy the necessary height, rendering the attempt to vertically center it futile. The solution would be to provide a height to the parent element of the element you want to center, for example, a min-height: 100vh. This way, it will have the space needed to be vertically centered.

    Marked as helpful
  • Rebecca Padgett•2,100
    @bccpadge

    Hello @Galvez121. Congratulations on completing this challenge!!!🎉

    To answer your question, you can use Flexbox or CSS Grid to center your component in the middle of the page.

    More info📚:

    You can add these styles on the <body> element. It doesn't matter which CSS Layout you choose the result is the same.

    Flexbox

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

    CSS Grid

    body{
 display: grid;
 place-content: center;
 min-height: 100vh;
}

    HTML 📃:

    • Every website should have at least one landmark so you can wrap your content using <main> tag.
    • When writing HTML, stick to class names because Ids are mainly used for JavaScript.

    Hope this helps you and have any other questions I would be glad to help you and just let me know✌🏼

    Marked as helpful

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