Submitted almost 3 years ago

Product Preview Card using React and Styled Components

react, styled-components

Tim Martin•260

@TimMartin13

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

What is the best practice to swap the image based on a media query in React with Styled-Components? I couldn't get the image to swap without adding a second image and hiding the one that wasn't suppose to show. It works fine, just probably not optimal.

Code

Please log in to post a comment

Community feedback

Elaine•11,360
@elaineleung
Posted almost 3 years ago
Hi Tim, about your question, you can try using one img element containing an srcset that allows the browser to swap the images based on breakpoint. More on this at MDN: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

I also managed to use picture for responsive images when I was building another challenge using Next.js, but I think img may be more suited since it's only resolution switching that's going on here. Here's an example I used for this challenge:
```
<img alt="perfume bottle" 
   srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w"        
   sizes="(min-width: 745px) 600px, 686px" 
   src="images/image-product-desktop.jpg">
```
Also, I just checked out your site and the image looks a bit distorted in its aspect ratio; you may want to add an object-fit: cover to sort that out! 🙂
Marked as helpful

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