@danielzeljko
Posted
Nice work, Irene!~
<picture>
<source srcset="images/image-product-mobile.jpg" media="(max-width: 767px)">
<source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)">
<img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum perfume">
</picture>
We can simplify this by setting the mobile version of the image as the default and only using one source for the desktop image:
<picture>
<source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)">
<img src="images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum perfume">
</picture>
How'd you get the value of 768px
? The readme mentioned desktop resolution was somewhere in the 1100px
range.
I honestly don't think you really need to worry about such small window screens. No one will use a phone that has like 100px width, so the shrinkage really isn't a problem. I didn't see this problem on your live version of the site even using the responsive design mode.
Marked as helpful