Submitted 16 days ago

Product Card Component in React + Demo Product Gallery

Keiner Mendoza• 200

@keinermendoza

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of creating a product gallery that demonstrates how the component works with different image sizes and varying lengths of text descriptions.

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

Without a doubt, the biggest challenge I faced was managing the images. It was difficult to give them the correct size and position, but in the end, I found the aspect-ratio property and the use of a container element for the image to be very useful.

Community feedback

Raquel• 120

@Saekit

Posted 15 days ago

Your solution looks great! The demo mode is very cool. I noticed while in mobile view, demo mode looks good, but in desktop view it looks squished in a row.

I also found managing the images challenging, so I learned about the <picture> tag which is great to use for responsiveness. Check it out: https://www.w3schools.com/tags/tag_picture.asp

Keiner Mendoza• 200

@keinermendoza

Posted 15 days ago

@Saekit, thanks for checking my solution. You're right, I have the same feeling about the large screen version. I saw the resource you shared with me. How can the <picture> element help me with the problem of the squished elements in the grid?

Raquel• 120

@Saekit

Posted 15 days ago

@keinermendoza, ah no I meant you can use the picture element to change the image to a different image based on the screen size for responsiveness, nothing to do with the squished elements on the grid. I was making two completely separate points haha sorry for the misunderstanding.

Please log in to post a comment

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