Looking to hire developers?
Hey guys, thanks for watching my project and for any suggestion! I have one main question, i couldn't use flex display to perfectly center the image vertically (align content: center, even if i added it) because after checking i saw that the body didn't cover the entire page, so the image was basically centered because the body height was exacly like the main height.. i had to add a padding to the body bottom and vertically move the rest down with the top margin.. i tried to add 100% height and width to the body without results.. anybody knows how to fix it? thanks everybody in advance, and happy coding!
Account Deleted
You can try setting height of body to 100vh and width to 100vw. This will allow the body to take up the entire viewport and you can then center the card using flexbox. I did something similar in mine. You can check it out here: https://github.com/fahadimran11/qr-component-design. I can also open up a pull request in your repository if you'd like. Hope this helps!
Marked as helpful
@Aliyu-Saidu
Posted
Nice work @Ripra87. Here are some suggestions to improve your code.
If you need more help or want to discuss this further, please feel free to contact.
Hope this helps?
If yes, you may consider hitting the helpful button below. Thanks!
Marked as helpful
@gian-noche
Posted
Hello @Ripra87! Congratulations on finishing the challenge!
I can't directly answer how you could've centered the image as you asked because I couldn't follow the sequence of the code.(I just finished this challenge as well :sweat_smile:) But I can share a small tip.
I checked out your code and noticed that you used flex without declaring the flex-direction . By default, flex's direction is row, which puts the elements side by side. But for this challenge, you have to put them on top of each other so flex-direction: column; would've been a great start and would save you a lot of hassle. You can try this:
body {
background-color: hsl(212, 45%, 89%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
}
main {
width: 375px;
background-color: white;
padding: 2rem;
text-align: center;
}
img {
width: 100%;
}
Try changing the width of your main and everything should still stay centered. I hope that helps.
Again, nice job on finishing the challenge!
@Ripra87
Posted
@gian-noche thank you, yeah i'm still practicing with flex display, need a lot of work ) by the way (if one day you would have the same problem) i culdn't center the card in the body because the body itself had the same height of the card, the body didn't take the whole page (for some reason, i don't know why :P ) guys here told me to use the vw instead of percentage or em or similar, it looks the only way the body does what i want ) height: 50vw for example, instead of 50% or else. btw i looked your challenge too, really good work!
@gian-noche
Posted
@Ripra87 Thank you!
I had to update the code I posted coz the min-height property was missing.
vw is the width of the viewport/screen. For the height, you have to use vh (viewport height). 100vh means 100% of the height of the viewport.
As for the card, I see two possible reasons:
I'd suggest going on each line and understand how they affect your code. (a.k.a. The Rubber Duck technique)
Marked as helpful
@Ripra87
Posted
Thank both guys it works )) i used vw and now is centered, but i had to set the body height at 50vw, with 100 is double size and i have to use the scroll bar :P For Aliyu-Saidu i used the h3 only because looking at the font size in the pictures it looked so small, but i could anyway use the h1 and resize it, right ) About the percentage, i read somewhere that is always better to use percentage or em (or rem for children) because it makes the page more responsive, with the px it doesn't happen, isn't it right?
@Aliyu-Saidu
Posted
@Ripra87 the reason you noticed that double size might be because of other specifications. That is, those margin and padding hacks you used previously on the body bottom and footer. Otherwise setting the universal selector '*' to margin: 0; padding: 0; and box-sizing: 0; and body's width and height to 100vw and 100vh should set your entire page to viewport width and viewport height (that exactly the width and height of your screen irrespective of the device you use). You may wish to check my work for more clarification. Thanks!
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
