
Solution retrospective
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!
Please log in to post a comment
Log in with GitHubCommunity feedback
- 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
Nice work @Ripra87. Here are some suggestions to improve your code.
- To answer your questions, consider setting the width and height of the 'body' element to say 100vw and 100vh respectively. Then remove the padding and margin hack you used above. Please always avoid setting your 'body' element height in percentage. This may give you unwanted results as you saw above.
- For proper outline of your documents or website. Always start the first heading in your webpage with a level one (h1) element. Yes this challenge may just be (in real sense) a component of your website but as this is the only thing you have on your webpage, you should consider using h1 instead of the h3 you used in your code. This should solve the accessibility report warning you had above.
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
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
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?
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