Design comparison
Solution retrospective
Made an effort to condense code as much as possible
What challenges did you encounter, and how did you overcome them?I managed to center the "main" element horizontally on the page but struggled to do so vertically. I tried the same approach as for horizontal centre alignment, i.e. specify give an exact height then set margins to auto, thinking it would work the same way but it didn't. When I set the vertical margin to auto it just removed all the vertical margins.
What specific areas of your project would you like help with?Couldn't find anything online regarding the vertical centring. Ended up having to define exact vertical margins to get it looking centred.
Any ideas, please share
Community feedback
- @DomilsonFirminoPosted 5 months ago
One way you could use to center the content is html, body{ height: 100% } //This will make you the html and body take all the height available
body{ display: grid; place-content: center; }//with the body taking all the height availably this will center it, you can also do the same with flexbox
and remove the margin and height from the Main tag - After that you no longer need this part
I advise you to search about css resets, and to use the inspector it gives good hints about the tags behaviors, I hope that i could help you
Marked as helpful1@MH-RashidPosted 5 months ago@DomilsonFirmino Thanks for the feedback, much appreciated. I had to do a bit of digging for the centering, but your approach of setting body display to grid is interesting 👍
0@DomilsonFirminoPosted 5 months ago@MH-Rashid I am glady if a could help, centering content is one of the most annoying things to do
0
Please log in to post a comment
Log in with GitHub
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