Design comparison
Solution retrospective
How do I center both the divs of my main tag? The summary div is positioned in relative to the first div, so I was unable to center them both.
How to ensure both divs have the same height and width? I had to brute-force the paddings and margins to obtain the result.
A problem I encountered that I did not understand at all: A child span element did not receive the properties of the class that its parent p element had. Why did this happen? (Context: To couple the reaction icon with the word "reaction", I set them in a span but in doing so, the word "reaction" lost all properties of its parent p tag)
Community feedback
- @Kamlesh0007Posted over 1 year ago
To properly center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📙. For this demonstration we use css grid to center the component body { min-height: 100vh; display: grid; place-items: center;
margin: 0;} I hope you find it helpful ! 😄
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