@slackwaree
Posted
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*/}
}
@m-rooeintan
Posted
Thank you for your help😊🌹@slackwaree