Submitted 12 months ago

Solution using flex-box

Juan Galvez• 50

@Galvez121

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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 ^^

Community feedback

FFerDev• 30

@FFerDev

Posted 12 months ago

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

Juan Galvez• 50

@Galvez121

Posted 12 months ago

@FFerDev Thank you so much! Something new that I learned.

Rebecca Padgett• 1,760

@bccpadge

Posted 12 months ago

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.
- Ids in HTML

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

Marked as helpful

Juan Galvez• 50

@Galvez121

Posted 12 months ago

Thank you @bccpadge. I will include the <main> in my following projects. Now, I know why I did not work the "justify-content: center;" and "align-items: center;" properties; I did not define the height!

Please log in to post a comment

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