Responsive cart parfume with flexbox and media queries
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello @msiesse, Congratulations on completing this challenge!
Your component is okay but its missing the vertical alignment. The best way to do it is by using
flexbox
. First step is to addmin-height: 100vh
to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment withdisplay: flex
/align-items: center;
/justify-content: center;
body { display: flex; min-height: 100vh; background-color: hsl(30, 38%, 92%); flex-direction: column; align-items: center; justify-content: center; }
βοΈ I hope this helps you and happy coding!
Marked as helpful0 - @AdrianoEscarabotePosted about 2 years ago
Hi msiesse, how are you?
I really liked the result of your project, but I have some tips that I think you will like:
To obtain a better centralization of the content, we can do it this way:
I added:
body { display: flex; align-items: center; justify-content: center; min height: 100vh; flex-direction: column; }
If you have any questions, answer this comment and I'll explain better!!
The rest is great!!
Hope it helps...π
Marked as helpful0
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