@MelvinAguilar
Posted
Hi @mbonamensa π, good job for completing this challenge!
In addition to the above comments and answering your question, you can use <picture>
tag when you need to change the image on different viewports, using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from using a media query to modify the image More information here
Example:
<picture>
<source media="(max-width: 545px)" srcset="./img/image-product-mobile.jpg">
<img src="./img/image-product-desktop.jpg" alt="your_alt_text">
</picture>
In this solution you should not use the background property to set the image because this image has an important semantic meaning, use CSS background property if the image is not part of the content.
Good Job and happy coding !
Marked as helpful