Skip to content
Submitted 3 months ago

Product Card Component in React + Demo Product Gallery

Keiner Mendoza•240
@keinermendoza
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @SaekitPosted 3 months 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

    1
    Keiner Mendoza•240
    @keinermendozaPosted 3 months 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?

    0
    Raquel•120
    @SaekitPosted 3 months 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.

    1

Please log in to post a comment

Log in with GitHub

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