Design comparison
SolutionDesign
Community feedback
- @lukejansPosted almost 2 years ago
Hey, Lois! I have a suggestion for responsive design with your images that I think you'll appreciate!
use the picture tag with a source and query to change the image depending on screen size so you get the smaller image when the product page collapses to a single column.
<picture> <source srcset="./images/image-product-mobile.jpg" media="(max-width: 628px)" /> <img src="./images/image-product-desktop.jpg" alt="Channel Perfume" class="image" /> </picture>
you can visit my github repo for reference!
If you found this helpful please consider marking this comment as helpful! Thanks and HAPPY CODING!
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