• 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

dabollicks

Active member
#1
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!
 

dabollicks

Active member
#3
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 :(
 

Brogan

XenForo moderator
Staff member
#4
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.
 

dabollicks

Active member
#7
<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?
 

Brogan

XenForo moderator
Staff member
#8
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.