XF 1.2 How to make a banner responsive

[Mr Lucky]

If I have a banner e.g. above content, is there a way to make it responsive?

Thanks

 

[Jeremy]

It depends on how you created the banner. @Brogan's responsive design resource explains a lot of how to go about responsive design.

 

[Mr Lucky]

The banner is either an image (.jpg) with a link or adsense. Where do I find that responsive design resource please?

 

[Jeremy]

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

There are still several methods to add a banner (ie, background, img tag, etc.)

 

[Mr Lucky]

Thanks, I follow the adsense instructions, but the second link doesn't seem to address how to make a banner image responsive, all I can find is:

If you use a custom solution then you will need to adapt it to work with responsive design.

In my ad above content template I have this :

<xen:comment>DEFINE AND RANDOMIZE YOUR BANNERS</xen:comment>

<xen:set var="$banners.1"><a href="http://domain.com/"><img src="image1.png" alt ="" /></a></xen:set>
<xen:set var="$banners.2"><a href="http://domain.com/"><img src="image1.png" alt ="" /></a></xen:set>

{xen:raw '$banners.{xen:calc '({$serverTime} % 3) + 1'}'}

So no size is set for the images, yet they do not resize responsively.

 

[Mr Lucky]

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

There are still several methods to add a banner (ie, background, img tag, etc.)

Can you explain the other ways please? I have tried using img in the ad location above content and it is not working responsively? I have tried setting no width for the img style, as well as max-width.

 

[Mr Lucky]

It's OK, I just needed to learn a bit more about responsiveness:

  .bannerad {
    max-width: 100%;
    height: auto; 
  }