XF 1.4 Banner for a responsive design.

[Arnuxx]

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.

 

[Mr. Goodie2Shoes]

Can you post the HTML code for the banner you used?

 

[Arnuxx]

<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" /></a>
</div>

 

[Mr. Goodie2Shoes]

okay... change it to:

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

 

[Arnuxx]

no,didn't work.
But this is really not give me an answer.
I was asking "show different size .gif or .jpeg banners when browser size reduces."

 

[Paul B]

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.

 

[Mr. Goodie2Shoes]

ah... missed one this:

<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

 

[Arnuxx]

yes,that works
is t possible to have banner aligned to center on when browser on full width ?

 

[Mr. Goodie2Shoes]

This:

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

 

[Arnuxx]

Thanks so much