Design comparison
SolutionDesign
Solution retrospective
I had some difficulty re-understanding container centering issues, as well as choosing between margins and padding. I don't think using padding in the end was the best possible practice.
Community feedback
- @Ritika-Agrawal811Posted 11 months ago
Hey! great work on the challenge!
Flex can be confusing to understand so I would like to suggest few points looking at your code:
- when using flex, if we want to center align a child vertically we need to add a height to the parent. In the "box" class, I think
align-items
andjustify-content
are used to center the "container" so just add a min-height/height of 100vh.
.box{ margin-top: 70px; display: flex; align-items: center; justify-content: center; height: 100vh: /* just add a height */ }
- Because you added
align-items: center
to "container", you don't have to add left and right padding to h1 and p tags. They would already be in center.
Also I think you have accidently deleted the image from your repo. Keep coding!
Marked as helpful0 - when using flex, if we want to center align a child vertically we need to add a height to the parent. In the "box" class, I think
Please log in to post a comment
Log in with GitHubJoin 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