Responsive Product Preview Card Component

The picture element should work just fine, in case you want a work around you can do something like this

html

<img id="product-image-desktop" alt="Perfume bottle" src="./Project Requirements/images/image-product-desktop.jpg">

<img id="product-image-mobile" alt="Perfume bottle" src="./Project Requirements/images/image-product-mobile.jpg">

css

**When on desktop
#product-image-mobile {
  display: none;
}

**when on mobile
#product-image-mobile {
  display: block;
}

#product-image-desktop {
  display: none;
}

You don't need to use javascript for this

Hi again Crystal!

About picture method, were you using media queries to set the source of the image?

I found it hard to work with picture before, but after doing some research it's a nice way to make responsive image.

The syntax looks like this:

<picture>
  <source media="(min-width: 1200px)" srcset="wide-crop.jpg">
  <img src="close-crop.jpg" alt="…">
</picture>

This method helped me through FAQ accordion challenge.

Here is a link more about using this method.