In this challenge, I was given 2 product images, one for mobile and one for desktop. And since I found out about the srcset, I tried to implement it in this solution, however, I would like to know if this is a good approach since when you resize the screen using the dev tools, you won't see the images changing until You force reload your browser, and this is because the in the first load of the page the browser check what is the best source for your image tag according to the window/screen size, and when you resize the window, the browser won't change it. The other option I have is to set the images as a background and change them with media queries, but what if my page has to display a lot of products? and the third option, which I don't prefer, is to have the 2 images and with CSS hide one on mobile and the other on desktop, thanks for your comments in advance.
Miyamotto
@MiyamottoAll comments
- @lenz-moragaSubmitted about 2 years ago@MiyamottoPosted about 2 years ago
Hey Lenz, i checked your code and can give you advice to use <picture> tag when you have more then 1 images and wrap them inside that tag. for example in your code remove your image tags and put this one there, under the article tag:
<picture> <source media="(max-width:650px)" srcset="./images/image-product-mobile.jpg" /> <img src="./images/image-product-desktop.jpg" alt="Gabrielle Parfum" style="width: auto" /> </picture>..so when screen size is equal or less then 650px it will display mobile image, otherwise it will automatically resize to desktop version.
Marked as helpful2 - @MiyamottoSubmitted about 2 years ago
i would appreciate suggestions and comments.
@MiyamottoPosted about 2 years agowell, seems like i didn't payed attention to the task, chart changes color when you hover on it or /and when you click on it.
0
