Design comparison
SolutionDesign
Solution retrospective
I found it difficult to switch images from the mobile to the desktop and I guess understanding max-width in CSS... will look at it keenly.
Community feedback
- @ViniciusMassariPosted over 1 year ago
Hello ! There is a tag in html named <picture> and the common use for this tag is deal with responsive images and you can use that to change the image based on screen width.
You can learn how to use it in
https://www.w3schools.com/tags/tag_picture.asp
feel free to check my html code here
<div class="product-photo"><picture> <source media="(min-width: 30rem)" srcset="./img/image-product-desktop.jpg" /> <img src="./img/image-product-mobile.jpg" alt="" /> </picture>
check the use in tailwind too :) hope this helps
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord