Design comparison
Solution retrospective
How to make a mobile image work in mobile view and desktop image work at desktop view
Community feedback
- @sasanqcPosted almost 2 years ago
As i did for this challenge, use picture tag to set multiple image sources for different image sizes.
<picture> <source srcset="images/image-product-mobile.jpg" media="(max-width: 375px)" /> <img class="image" src="images/image-product-desktop.jpg" alt="" /> </picture>
read this The Picture element - This helped me to get useful information about picture tag in html.
Marked as helpful0 - @Waldo3333Posted almost 2 years ago
Hi there, instead of setting the img directly in your html what you can do is setting a background-image to your div in css,
Then using a "@media (max-width : 375px)" still in your css, you can easily change the background-image of your div so it select the mobile image once the size of the screnn goes under 375px
like this, css :
.card__img-box { background-image : url ( your desktop size image ) }
@media (max-width : 375px){
.card__img-box { background-image : url ( your mobile size image ) }
}
Then so the image goes on top of your text div under 375px, using the same @media technique, you can change the display of your parent div, class="card" ( the one that include the div of your img part and the div of your text part) :
.card { display : flex }
@media(max-width : 375px){
.card {
display : flex ;
flex-direction : column}
}
So when your screen goes under 375px the display changes !
Hope it helps, see ya
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