Product Preview Card

Hi, are you having trouble with changing the image when a certain viewport width is met? A simple way of doing this is by giving each img element an id, respective of their use case. Then in your CSS file, hide one of the elements using display: none, and create a media query to display that image when the viewport width is met. Also, make sure to hide the other image. Example:

HTML:

<img src="image/source" id="perfume-image-mobile">
<img src="image/source" id="perfume-image-desktop">

CSS:

#perfume-image-desktop {display:none}

@media only screen and (min-width: 769px) { /* Desktop styles */
    #perfume-image-mobile {display:none;}
    #perfume-image-desktop {display:/*block/grid/flex*/}
}