Design comparison
SolutionDesign
Solution retrospective
whiles working on the media query section to complete my project, it occured to me that l was given two images; one for desktop and the other for mobile (375px). However, l managed to set everything, but was not able to set my media query to change to the mobile image. with regards to this, l would be so honored if anyone could offer a solution as to how to go about it.
Thank you.
Community feedback
- @hitmorecodePosted over 1 year ago
You can try this. With the picture element you can easily do this.
<div class="card"> <picture> <source media="(min-width: 673px)" srcset="images/image-product-desktop.jpg" alt=""> <source srcset="images/image-product-mobile.jpg" media="(min-width: 375px)"> <img src="images/image-product-desktop.jpg"> </picture> </div>
css
@media(max-width:673px){
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