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.
@hitmorecode
Posted
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 helpful
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
