@DonHeidi
Posted
Hey there GGSWEngineer,
nicely done! To make the component behave more responsive you could use something like this on your .container class.
min-width: 343px;
width: 100%;
max-width: 600px;
or shorthand
width: clamp(343px, 100%, 600px)
The container will respect the size of its children if it is between 343px or 600px.
You can also use the HTML picture element instead of your Script.
<picture class="product-preview-card__img">
<source srcset="images/image-product-mobile.jpg" media="(max-width: 768px)" />
<source srcset="images/image-product-desktop.jpg" media="(min-width: 769px)" />
<img src="images/image-product-desktop.jpg" alt="product image" />
</picture>
Hope this helps!
Marked as helpful
@GGSWEngineer
Posted
@DonHeidi thanks so much Don! I don't see the picture element being used often but I'll apply it in my other projects.