@MelvinAguilar
Posted
Hi @kutu-dev π, good job completing this challenge, and welcome to the Frontend Mentor Community! π
Is bad to use div as a responsive image? It depends on the situation, although it is not recommended to have an empty <div> in your HTML code.
Additionally, In this challenge, you should not use the background property to set the image because this image has semantic meaning. Use the CSS background property if the image is not part of the content.
Here is an alternative to use as a background:
- You can use a <picture> tag when you need to change an image in different viewports. Using this tag will prevent the browser from loading both images, saving bandwidth and preventing you from utilizing a media query in your CSS file to modify the image.
Example:
<picture>
<source media="(max-width: 500px)" srcset="./images/image-product-mobile.jpg">
<img src="./images/image-product-desktop.jpg" alt="your_alt_text">
</picture>
Good job, and happy coding! π
Marked as helpful
@kutu-dev
Posted
@MelvinAguilar Thanks! I already changed it