XF 1.2 Responsive Ad

[dabollicks]

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!

 

[Paul B]

These resources may help.

http://xenforo.com/community/resources/responsive-design.2193/

http://xenforo.com/community/resources/responsive-adsense.2084/

 

[dabollicks]

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

 

[Paul B]

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]

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

 

[Paul B]

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

 

[dabollicks]

<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?

 

[Paul B]

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.

 

[dabollicks]

Still not working, even with just a max-width

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

 

[Paul B]

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