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

Responsive Design

Brogan

XenForo moderator
Staff member
#1
Brogan submitted a new resource:

Responsive Design - In out, in out, shake it all about

As the title suggests, this guide will hopefully explain what responsive design is, how to activate it and how to manipulate CSS.


What is Responsive Design and how do I activate it?
Responsive design is a setting which applies to each style individually and it dynamically changes the layout and design based on the browser width. This is achieved using conditional statements, media queries and custom CSS.

It is set in the ACP -> My Style -> Style Properties -> Responsive Design:...
Read more about this resource...
 

Jon W

Well-known member
#2
Tip: if creating an add-on that will be compatible with XenForo 1.1 and 1.2, add the responsive CSS using a template modification to avoid compatibility errors.
 

TheBigK

Well-known member
#4
@Brogan : I'm using ad_above_top_breadcrumb template to display ads from our advertisers. It's a standard 728x90 banner. When I resize the browser, the banner, being fixed width, breaks out of the container.

Is there any way to load a different banner (maybe from Adsense) when the browser size is narrower or at a point where the responsive design sets in?

I'm wondering if the template conditionals can be triggered when the site goes into narrower mode? That way, I'll be able to use something like -

< My Regular Ad Code > -> Displays when the user is viewing through a full width browser.
<New Code> -> Displayed when using a mobile, tablet or narrow width browser.

Update: My observation: -

1. The ad_above_top_breadcrumb template continues to display when in mobile layout.

2. If the responsive layout allows use to load a different template in place of a standard template - above problem would be solved in a minute!
 

MattW

Well-known member
#5
@Brogan : I'm using ad_above_top_breadcrumb template to display ads from our advertisers. It's a standard 728x90 banner. When I resize the browser, the banner, being fixed width, breaks out of the container.

Is there any way to load a different banner (maybe from Adsense) when the browser size is narrower or at a point where the responsive design sets in?

I'm wondering if the template conditionals can be triggered when the site goes into narrower mode? That way, I'll be able to use something like -

< My Regular Ad Code > -> Displays when the user is viewing through a full width browser.
<New Code> -> Displayed when using a mobile, tablet or narrow width browser.

Update: My observation: -

1. The ad_above_top_breadcrumb template continues to display when in mobile layout.

2. If the responsive layout allows use to load a different template in place of a standard template - above problem would be solved in a minute!
http://xenforo.com/community/threads/responsive-adsense.54891/
 

MattW

Well-known member
#7
Can you not use the <xen:if is="{$isResponsive}"> conditional to change the banner size?

<xen:if is="{$isResponsive}">
SMALL BANNER
<xen:else />
NORMAL BANNER
</xen:if>
 

TheBigK

Well-known member
#8
Can you not use the <xen:if is="{$isResponsive}"> conditional to change the banner size?

<xen:if is="{$isResponsive}">
SMALL BANNER
<xen:else />
NORMAL BANNER
</xen:if>
Already tested it. It continues to show the 'SMALL BANNER' all the time. Does not switch to the NORMAL BANNER when the browser width shrinks; even beyond the point where the responsive design kicks in.
 

Brogan

XenForo moderator
Staff member
#9
That is explained in the resource description.

A responsive style is always responsive; it is not based on browser width.
 

TheBigK

Well-known member
#10
That is explained in the resource description.

A responsive style is always responsive; it is not based on browser width.
Hi Brogan,

@Arty 's responsive design (which I currently have on the site) removes the ad completely as soon as the browser width is less than certain threshold. I was wondering if something similar was possible; if loading another ad isn't possible.
 

TheBigK

Well-known member
#12
Wrap your ad in
Code:
<div class="hiddenResponsiveWide">
Change that class name to hiddenResponsiveMedium if to hide at medium width or hiddenResponsiveNarrow to hide at narrow width.
That's cool. Will try it out in some time.

Is there any way to display other ad when the width is narrow or medium?
 
#15
Oh, I don´t mean the logo. I mean a ad banner in the header. I use the hiddenResponsiveNarrow class. On Mobile Phone looks great but on tablet not.
 

Brogan

XenForo moderator
Staff member
#18
In which case my first response applies.

Use media queries to manipulate the classes at different widths.
The examples in the resource explain exactly how to do it.
 

Mouth

Well-known member
#20
Do I have the correct usage of the predefined CSS classes ...

HTML:
<div class="visibleResponsiveFull visibleResponsiveWide">
  <div id="bsap_1286480" class="bsarocks bsap_a7ac845a1568bf4e1a00976b9a439ae5"></div>
</div>
Desired Outcome: My BuySellAds 728x90 banner ad's will only display if the client browser display is within Full or Wide specifications, and the banner ad will not show for Medium and Small dimensions client browsers.

Thanks.