1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.4 showing banner ad on desktop and mobile

Discussion in 'Styling and Customization Questions' started by gavpeds, Dec 15, 2014.

  1. gavpeds

    gavpeds Active Member

    Hi all i am sure this is achievable some how but i just am not sure how or what coding i will need to use.

    Basically i am showing a image banner ad in the header of my site, as this is an image it does not resize for mobile so instead i wonder if it is possible to show the larger banner for desktop and a smaller version for mobile.

    How can i achieve this?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    By using a media query.

    The link in my signature explains how.
     
  3. gavpeds

    gavpeds Active Member

    Ok so i am using rotating ads plugin to show the banner. I have done the below but have an issue that both version show on desktop.

    In Extra.css i have this
    Code:
    @media (max-width: 483px) {
      .banner-1 {
        display: none;
      }
      .banner-2 {
        display: block;
      }
    }
    In the area where i can put html for the banner in rotating ads plugin i have this.
    Code:
    <div style="text-align: center;">
    <div class="banner-1"><img src="/myimages/sponsors/whizzbizz728.png" /></div>
    <div class="banner-2"><img src="/myimages/sponsors/whizzbizz.png" /></div>
    </div>
    On mobile i now get the smaller banner but on desktop i get both versions.
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    That's probably because you don't have any code to hide banner 2 at any width.
     
  5. gavpeds

    gavpeds Active Member

    What code would i need to hide banner 2?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    The same way you hide the other one - display: none.
     
  7. gavpeds

    gavpeds Active Member

    I changed the display: block; to display: none; for banner 2 but that just removes the mobile banner on mobiles.
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    It would.

    Use display:none in the regular CSS, display: block in the media query.
     
  9. gavpeds

    gavpeds Active Member

    You mean like this?

    .banner-1 { display: none; }

    @media (max-width: 483px) {
    .banner-2 { display: block; }
    }

    With this i still get mobile version on mobile but bother versions on desktop.
     
  10. gavpeds

    gavpeds Active Member

    Ok so someone just suggested i just use this
    img {
    max-width: 100%;
    height: auto;
    }

    Can i safely use this? It works but presume this would effect all <img src= on the site?
     
  11. gavpeds

    gavpeds Active Member

    So i think i now have a solution that works for me and maybe this might be useful for others.
    This now makes my 728 banner shrink to fit mobile or other views without breaking out of the responsive styling of the forum.

    Css
    Code:
    .headerbannerad img {
        max-width: 100%;
        height: auto;
    }
    html
    Code:
    <div style="text-align: center;">
    <div class="headerbannerad"><img src="imageurlhere" /></div>
    </div>
     
  12. cclaerhout

    cclaerhout Well-Known Member

    If you want to avoid to use the css media queries and avoid the source of the other picture to be in the dom twice, you can take a look at this addon.
     

Share This Page