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

Responsive Design

In out, in out, shake it all about

  1. Brogan

    Brogan XenForo Moderator Staff Member

    Brogan submitted a new resource:

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

    Read more about this resource...
    CNK likes this.
  2. Jon W

    Jon W Well-Known Member

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

    RoldanLT Well-Known Member

    Excellent Guide as Always @Brogan (y)
  4. TheBigK

    TheBigK Well-Known Member

    @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!
  5. MattW

    MattW Well-Known Member

  6. TheBigK

    TheBigK Well-Known Member

  7. MattW

    MattW Well-Known Member

    Can you not use the <xen:if is="{$isResponsive}"> conditional to change the banner size?

    <xen:if is="{$isResponsive}">
    <xen:else />
  8. TheBigK

    TheBigK Well-Known Member

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

    Brogan XenForo Moderator Staff Member

    That is explained in the resource description.

    A responsive style is always responsive; it is not based on browser width.
    Chris D likes this.
  10. TheBigK

    TheBigK Well-Known Member

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

    Arty Well-Known Member

    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.
    LondonDragon and TheBigK like this.
  12. TheBigK

    TheBigK Well-Known Member

    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?
  13. Spike05de

    Spike05de Member

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

    Brogan XenForo Moderator Staff Member

    Use media queries to manipulate the CSS at different widths.

    There are examples in the resource content.
  15. Spike05de

    Spike05de Member

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

    Brogan XenForo Moderator Staff Member

  17. Spike05de

    Spike05de Member

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

    Brogan XenForo Moderator Staff Member

    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 likes this.
  19. Spike05de

    Spike05de Member

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

    Mouth Well-Known Member

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

    <div class="visibleResponsiveFull visibleResponsiveWide">
      <div id="bsap_1286480" class="bsarocks bsap_a7ac845a1568bf4e1a00976b9a439ae5"></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.


Share This Page