Product Preview Card Component | HTML, CSS and Flexbox
Design comparison
Solution retrospective
This project has been updated thanks to @SindhujaBandaru's advice on how to center the card with min-height: 100vh. Thanks again, @SindhujaBandaru!
Community feedback
- @SindhujaBandaruPosted about 2 years ago
Hello @codercreative Congrats on completing your project.
-For body tag in CSS instead of using margin to center the body,use this instead
body{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
min-height:100vh;
}If you need to put some content just in the middle of the page you have to set body to min-height: 100vh; and handle the overflow if needed. Hope this helps!
Marked as helpful0@codercreativePosted about 2 years ago@SindhujaBandaru Thank you so much for your very helpful tip! 😃 Cheers, Christina
1
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