Skip to content
Submitted about 2 years ago

Product Preview Card Component Challenge

DJ Drakos•150
@dj-drakos
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

Built in React with some simple functionality. The component renders content based on props. There is logic to render and style the correct price, whether or not the product is full price or on sale, as well as a button that tracks product available in state and will disable when the available quantity reaches 0.

I wanted to find a solution to render the product images responsively that didn't rely on CSS, since background images don't support alt attributes. I used the <picture> element, which caused some issues with how the image scaled to fill the parent container, and took some time to address. Are there better ways to handle making sure the component meets accessibility guidelines?

Community feedback

  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    Hi DJ Drakos, great work here, and I like how you included the "extras" in your solution, which I managed to test somewhat when I was clicking on the "add product to card" button (by the way, on that note, you can add a cursor: pointer to show users that the element is interactive).

    About your question regarding the image, I think what you did in using picture is the right way to go instead of using background-image. In terms of scaling, just looking at your CSS in the inspector, you probably just need to add object-fit to the img (I'd probably use object-fit: contain at mobile view and object-fit: cover at desktop view). Often times, not having object-fit would result in the image being distorted and out of its aspect ratio, and if that's the case then the issue is not so much about using the picture element or not. I'm guessing the scaling issue could be a reason why your component is not responsive right now, as you could be trying to prevent it from getting distorted.

    Anyway, I hope you get it sorted, and once again, great job! 😊

    Marked as helpful
    0

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