Product Card Component in React + Demo Product Gallery

Solution retrospective
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Saekit
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
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