Oranga• 40
@Gh0stByt3s
Submitted
How to make a mobile image work in mobile view and desktop image work at desktop view
Waldo
@Waldo3333
All comments
- Waldo• 250
@Waldo3333
Posted
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 helpful
0 - Ahmed Mangood• 50
@ahmed-mangood
Submitted
Waldo• 250@Waldo3333
Posted
I noticed you used the desktop image for the mobile background =
"@media max-width: 799px { .card .card-img { width: 340px; height: 472px; border-bottom-left-radius: 8px; background-image: url('images/image-product-desktop.jpg'); } }"
and the mobile image for the desktop size =
"<div class="card"> <img class="card-img" src="./images/image-product-mobile.jpg" alt="">
</div>"may switching them could fix the image glitch :)
Marked as helpful
0
