Product preview Card Website

Solution retrospective
I hope my project preview stops jumping higher than it should. I do not really know how to make it appear inline with the solution.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
I can see quite a lot of issues in this challenge but before going through them, particularly styling ones, I'll leave you with this post which explains what is needed in html: https://fedmentor.dev/posts/html-plan-product-preview/
Make the changes to html first then I'll give feedback on styles.
Also worth you reading: https://fedmentor.dev/posts/rem-html-font-size-hack/
Marked as helpful - @MarziaJalili
Excellent work!!!
here's a breakdown of how you can solve the puzzle you encounter:
Apply these lines of code to the body selector:
display: grid; place-items: center; min-height: 100vh;
The issue comes from the
<div class="attribution">
, the code I have set for centerizing the card will only work if it's the only child element of thebody
element.you have two choices:
- you can either wrapp every thing in the
<body>
element inside another element like the<main>
element. - or you could completely get rid of the
<div class="attribution">
element.
It will definitely work out😎.
Hope it was something worth reading😅.
Marked as helpful - you can either wrapp every thing in the
Join 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