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 Using Grid and Landing Animations

Kimistin 50

@Kimistin

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


What challenges did you encounter, and how did you overcome them?

learning grid from basically the start, fitting the image in there(which only worked with a fixed height for some reason)

Community feedback

geomydas 1,060

@geomydas

Posted

NEVER SET A FIXED WIDTH UNLESS YOU REALLY NEED TO Doing so will make it unresponsive and will not shrink, use max-width instead. You would only use fixed widths on very small small items such as profile pictures. Also, NEVER SET FONT-RELATED PROPERTIES IN PX, use rem instead so it is more accesible. https://www.joshwcomeau.com/css/pixel-perfection/ Same goes for media queries. Other than that, I don't reccomend centering divs using absolute positioning, use flex instead

Marked as helpful

1

Kimistin 50

@Kimistin

Posted

@geomydas the bottom of the container had this weird extra space, i tried changing the paddings and margins of the button and img, but nothing worked, only way was using an fixed height, but anyway, i might try revisiting this project in a couple of days with your critics in mind, thanks alot!

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