Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Serving one image for mobile and one for desktop Reply To: Serving one image for mobile and one for desktop

#190821
Senff
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.