Ahmed Mohamed 🇵🇸• 310
@ahmedafsa
Posted
Hello @Taannn, Good job!
It is better to use the <picture>
element with <source>
tags and media queries to make the product image responsive instead of the two <img>
elements
- HTML:
<picture>
<source
srcset="images/image-product-mobile.jpg"
media="(max-width: 600px)"
/>
<source
srcset="images/image-product-desktop.jpg"
media="(min-width: 601px)"
/>
<img src="images/image-product-desktop.jpg"/>
</picture>
- CSS:
@media (max-width: 600px) {
.your-grid-container {
grid-template-columns: 1fr;
}
}
Marked as helpful
1
Tristan• 20
@Taannn
Posted
@ahmedafsa Thanks!! I was troubled on how I can use 2 images for both layout so this is a very nice suggestion, will try this out immediately! (update: it works, thanks @admedafsa)
0
Ahmed Mohamed 🇵🇸• 310
@ahmedafsa
Posted
@Taannn You're welcome, glad I could assist :)
0