Desktop/Mobile Responsive Product Preview Card Web Site Using Grid.

Solution retrospective
what could i have done differently if you noticed any?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @anar-sol
Hi =)
Instead of using CSS to change the image, you can use
picture
andsource
HTML elements to specify different images for mobile and desktop depending on the viewport size.In my solution, I've set the mobile version as the default image and the desktop one starting at
640px
width viewport.<picture> <source media="(min-width: 640px)" srcset="images/image-product-desktop.jpg" width="600" height="900"> <img src="./images/image-product-mobile.jpg" alt="Gabrielle Essence Eau De Parfum bottle" width="686" height="480" class="card__image"> </picture>
As you'll see in these MDN and web.dev articles, there are many other situations where
picture
andsource
can be useful.Marked as helpful
Join 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