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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #190806
    cyberpedz
    Participant

    Hi so i am trying to figure out how i can use media quires to serve a banner ad for both mobile and desktop.

    So for desktop we have a 728×90 banner
    No as our forum is responsive, when viewing on mobile this banner obviously breaks out to the right of the theme so….

    How can i serve a smaller image on mobile and serve the normal image on 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.

    #190823
    cyberpedz
    Participant

    Thanks i did try this but it now shows both images on both mobile and desktop.

    The html i have is this

    <div style="text-align: center">
    <div><img src="/myimages/sponsors/whizzbizz728.png" /></div>
    <div><img src="/myimages/sponsors/whizzbizz.png" /></div>
    </div>

    #190851
    Senff
    Participant

    You’ll have to give the images (or the DIVs wrapping the images) the classnames “small-banner” and “large-banner” in the HTML.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.