Responsive Design

[Paul B]

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]

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.

 

[rdn]

Excellent Guide as Always @Brogan

 

[TheBigK]

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

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

 

[TheBigK]

http://xenforo.com/community/threads/responsive-adsense.54891/

This, I think, only works when the ad displayed is just Adsense. In my case, it's a fixed 728x90 banner displayed from a non-Adsense network.

I'm aware of responsive adsense.

 

[MattW]

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]

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.

 

[Paul B]

That is explained in the resource description.

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

 

[TheBigK]

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.

 

[Arty]

Wrap your ad in

<div class="hiddenResponsiveWide">

Change that class name to hiddenResponsiveMedium if to hide at medium width or hiddenResponsiveNarrow to hide at narrow width.

 

[TheBigK]

Wrap your ad in

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

 

[Spike05de]

Can I use two Class Names or use an other logo when its medium?

 

[Paul B]

Use media queries to manipulate the CSS at different widths.

There are examples in the resource content.

 

[Spike05de]

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.

 

[Paul B]

There is a separate resource for AdSense: http://xenforo.com/community/resources/responsive-adsense.2084/

If you use a different ad provider then you will need to contact them to determine whether they have a solution.

 

[Spike05de]

There is a separate resource for AdSense: http://xenforo.com/community/resources/responsive-adsense.2084/

If you use a different ad provider then you will need to contact them to determine whether they have a solution.

I don´t use adsense. I use a normal jpg File. Works for all positions but not for the header.

 

[Paul B]

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.

 

[Spike05de]

Thank you. I have found another solution. I disable the header logo in the respollo.css in the Medium Width too and now it works fine.

 

[Mouth]

Do I have the correct usage of the predefined CSS classes ...

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