Design comparison
Community feedback
- @HassiaiPosted over 1 year ago
Replace <p class="name"> with <h1> to fix the accessibility issue.
To center .product on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
To center .product on the page using flexbox: body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
To center .product on the page using grid: body{ min-height: 100vh; display: grid; place-items: center; }
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1 - @KingKrysiukPosted over 1 year ago
add to your main class this:
position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
for center component hotizontal and verticall
1 - @YanlDevPosted over 1 year ago
Cool design! 🎉 Here are some pointers for improvement:
make use of flexbox to justify and align the the card to the centre of the page, as it currently seems off . You can do something like this:
* and put the contents there, *then use flexbox on main */ main{ display: flex; justify-content: center; align-items: center; } Doing it this way can also help you to create a correct size for the page too like this: html, body{ height: 100%; } main{ min-height: 100%; }
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