• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Banner for a responsive design.

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

Well-known member
#4
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>
 
#5
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."
 

Brogan

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

Well-known member
#7
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
 

Mr. Goodie2Shoes

Well-known member
#9
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>