Product Preview Card using React and Styled Components

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 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

  1

  ---

  

  P

  Tim Martin•260

  @TimMartin13Posted over 2 years ago

  @elaineleung Do you know which browser Frontend Mentor uses? My app looks nothing like the screenshot they create based on my code in either Firefox nor Chrome.

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @TimMartin13 I think it's Firefox. When you say your code looks nothing like the screenshot, are you referring to the font family or something else? There's an issue commonly seen with the Fraunces font face in this challenge, where the optical size version looks different in the screenshot. I just checked the index.html file in your public folder and it looks like you've got that version; you can try copying a new link and unchecking the "optical size" box before doing so, and then see if you want to try the screenshot again.

  0