Thank you very much, noted.
Design comparison
Solution retrospective
I'm having trouble with the positioning any help
Community feedback
@neeraj-verma-20
Posted
๐ ๐๐ฒ๐น๐น๐ผ ๐ข๐ก๐ฌ๐๐ก๐ฌ๐๐๐๐จ๐๐ช๐จ ๐๐๐ฆ๐ฆ๐๐๐ ๐ ๐๐๐๐ญ๐จ, ๐ฐ๐ผ๐ป๐ด๐ฟ๐ฎ๐๐๐น๐ฎ๐๐ถ๐ผ๐ป๐ ๐ณ๐ผ๐ฟ ๐๐ผ๐๐ฟ ๐ป๐ฒ๐ ๐๐ผ๐น๐๐๐ถ๐ผ๐ป!
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!
@correlucas
Posted
๐พ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 the body
min-height: 100vh
to make the body display 100% of the browser screen size and display: flex
e flex-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!
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