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

Responsive product preview card component using grid and flexbox

@elizabethrsotomayor

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


I changed my solution from using a flex container to grid in the hopes that the layout wouldn't be distorted on larger desktops. I did as a commenter suggested and changed the images to be inside their own div and modified the image to have a min-height of 100% in order to fill the container.

Community feedback

@Lucascmo8

Posted

@elizabethrsotomayor a tip inside the card class creates a div for the image and one for the text, it will make it much easier to customize the texts without messing up the whole card

1

@elizabethrsotomayor

Posted

@Lucascmo8 thanks for the feedback. I implemented your suggestion and think it looks a lot better! Much appreciated.

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