Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview

Nachoho 50

@Nachoho

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This took longer than expected but was fun to make

Community feedback

@AhmedAlharees

Posted

This is a wonderful solution @Nachoho. But the card is supposed to be centered vertically in the middle of the page, in your solution it's on the top. a solution for this problem is setting the body to 'display: flex' instead of display grid, and apply these changes also: body{ height: 100vh; display: flex; align-items: center; justify-content: center; } and the problem should be fixed. and if you want to keep the attribution div to the buttom, add "flex-direction: column". Good luck.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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