XF 1.4 Banner for a responsive design.

Arnuxx

Member
Hi all,
I have placed .gif banner on my forum,but when browser size reduces,add would go to side .
I would like to ask anyone,could anybody please explain,what code modification I need to have,to show different size .gif or .jpeg banners when browser size reduces.
I was reading one of the threads for a google adsense,but very difficult to understand.
I would really appreciate if anyone could make as simple as possible tutorial for this question,as I also think,that would help a lot of members also.
P.S don't want to install any add ons.
Thanks very much in advance.
 
okay... change it to:
HTML:
<xen:hook name="ad_above_top_breadcrumb" />
<div style="display: block; margin: 0 auto; text-align: center;">
<a href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%" /></a>
</div>
 
I would like to ask anyone,could anybody please explain,what code modification I need to have,to show different size .gif or .jpeg banners when browser size reduces.
This resource explains how to do that: https://xenforo.com/community/resources/responsive-design.2193/

I was reading one of the threads for a google adsense,but very difficult to understand.
I would really appreciate if anyone could make as simple as possible tutorial for this question,as I also think,that would help a lot of members also.
Presumably you mean this guide? https://xenforo.com/community/resources/responsive-adsense.2084/
It can't really be explained any simpler than that.
 
ah... missed one this:
HTML:
<xen:hook name="ad_above_top_breadcrumb" />
<div style="display: block; margin: 0 auto; text-align: center;">
<a style="display: block;" href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%; display: block;" /></a>
</div>

It would be a bit pain to set different banners for different screen sizes with only HTML...

EDIT: ninja'd :D
 
This:
HTML:
<xen:hook name="ad_above_top_breadcrumb" />
<div style="display: block; margin: 0 auto;">
<a style="display: block; text-align: center;" href="http://www.speedflow.com"><img src="ads/speedflow.gif" alt="Home" style="max-width: 95%; display:inline-block ;" /></a>
</div>
 
Top Bottom