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

XF 1.2 Responsive Ad

Discussion in 'XenForo Questions and Support' started by dabollicks, Jan 20, 2014.

  1. dabollicks

    dabollicks Active Member

    Hi

    Just managed to secure a site sponsor who wants an image to appear, I'm going to add it into one of the ad templates, most likely the ad_above_breadcrumb template

    My question is, how do i make this ad responsive? Im struggling to get my head round the code required

    Any help would be great!
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. dabollicks

    dabollicks Active Member

    Been through those and no matter what i try, i just can't get the image to adapt to the browser size. Im half tempted to turn the responsive site off :(
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    If it's a static image then just apply max-width:100% to it and it will automatically resize to the width of the container.
     
  5. dabollicks

    dabollicks Active Member

    It is a static image, any help on the correct code to use?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    Create a div and apply a class to it with a style of max-width:100%.
     
  7. dabollicks

    dabollicks Active Member

    <style type="text/css">
    .refsworld {
    width: 320px;
    height: 50px;
    max-width: 100%;
    }

    @media(min-width: 484px) {
    .refsworld {
    width: 468px;
    height: 60px;
    }
    }
    </style>
    <ins class="refsworld">
    <a href="http://www.refsworld.com" title="Refsworld">
    <img src="images/refsworld1.gif" alt="Refsworld"/></a>
    </ins>

    Can you pick apart my code, where am i going wrong?
     
  8. Brogan

    Brogan XenForo Moderator Staff Member

    You have explicitly set a width.
    Remove that and just do max-width.

    I just checked your site and couldn't see the banner in place.
     
  9. dabollicks

    dabollicks Active Member

    Still not working, even with just a max-width

    The banner should be appearing, depends what site you visited?
     
  10. Brogan

    Brogan XenForo Moderator Staff Member

    Look at how it's done for the logo here and try to replicate that.
     

Share This Page