Design comparison
Solution retrospective
I'm having trouble with the positioning any help
Community feedback
- @neeraj-verma-20Posted about 2 years ago
๐ ๐๐ฒ๐น๐น๐ผ ๐ข๐ก๐ฌ๐๐ก๐ฌ๐๐๐๐จ๐๐ช๐จ ๐๐๐ฆ๐ฆ๐๐๐ ๐ ๐๐๐๐ญ๐จ, ๐ฐ๐ผ๐ป๐ด๐ฟ๐ฎ๐๐๐น๐ฎ๐๐ถ๐ผ๐ป๐ ๐ณ๐ผ๐ฟ ๐๐ผ๐๐ฟ ๐ป๐ฒ๐ ๐๐ผ๐น๐๐๐ถ๐ผ๐ป!
Your product card is really good done, there's not much to say about it, but if you want to improve it a little bit more, you give it a better alignment with flexbox see the code below:
body { background-color: hsl(30, 38%, 92%); min-width: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
๐ I hope this helps you and happy coding!
0 - @correlucasPosted about 2 years ago
๐พHello onyinyechukwu Jessica Malizu, congratulations for your new solution!
All you need to do to align the component is remove the margins and add
flexbox
.Follow these steps, first remove the
margins
, then add to thebody
min-height: 100vh
to make the body display 100% of the browser screen size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.body { min-height: 100vh; background-color: hsl(30, 38%, 92%); display: flex; align-items: center; justify-content: center; flex-direction: column; } .container { /* margin: 50px 20%; */ }
๐ I hope this helps you and happy coding!
0@OnyiMalizuPosted about 2 years ago@correlucas Thank you very much, noted.
0
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