Home › Forums › CSS › Serving one image for mobile and one for desktop › Reply To: Serving one image for mobile and one for desktop
December 15, 2014 at 5:31 am
#190821
Participant
The simplest and (somewhat) most fail-safe way is to have two images (the one for desktop and the one for mobile), and based on the screen width, using media queries, only one of them has display:block;
and the other one has display:none;
.
Something like this:
@media and (max-width:749px) {
.small-banner {display:block;}
.large-banner {display:none;}
}
@media and (min-width:750px) {
.small-banner {display:none;}
.large-banner {display:block;}
}
Without any more details about your page, that’s about the simplest you can get.