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

XF 1.2 ad_header and the site logo

Discussion in 'Styling and Customization Questions' started by Myke623, Sep 1, 2013.

  1. Myke623

    Myke623 Active Member

    I'm having difficulty getting my site logo and my ad_header (with adsense code) to co-exist happily together. I'm employing the asynchronous adsense update as prescribed in Brogan's Responsive AdSense resource, and that is working as expected - I get the correct sized ad based on the browser width upon a reload.

    However, due to my fixed width of the logo I find that if I resize the browser and reduce the width such that the ad and logo collide, the logo will jump beneath the ad and an ugly overlaps with the main content ensues.

    Before:
    upload_2013-9-1_16-28-8.png

    After:

    upload_2013-9-1_16-28-50.png

    The breadcrumb/nav bar is hidden, but you can see the right-facing arrows just floating in place.

    Is there a way to prevent the overlapping? I wouldn't mind if the content below just got shoved down accordingly, but just wondering if there's a more elegant solution, or "preferred practice" to having a logo alongside an Ad in the header space when using a responsive design?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Unfortunately there is not much you can do about this.
    A page refresh will fix it as a smaller ad will be served, but this doesn't happen dynamically.

    Anything which increases the header space compared to what is set in SPs will have a detrimental effect on the style, especially the breadcrumbs and nav bar.

    I don't have an ad in the header for this reason.
     
  3. Myke623

    Myke623 Active Member

    So which locations are most compatible, or friendly toward, landscape-style ads in a responsive design?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    I use almost all ad templates but the ad_header template.
     
    Myke623 likes this.
  5. Hristo Avramov

    Hristo Avramov Active Member

  6. Myke623

    Myke623 Active Member

    Thanks for that, but I already decided that there simply wasn't enough space in my header for both the logo and Ad. Can I at least see a demo of your solution? It appears as though you have the logo sitting on top of the Ad? If so, that wouldn't be ideal for me, as it would take up too much vertical space.
     
    Hristo Avramov likes this.
  7. Hristo Avramov

    Hristo Avramov Active Member

  8. Myke623

    Myke623 Active Member

    Yeah, it appears that way, but when you reduce the browser width the Ad eventually appears under the logo, and behind the menu. This is not ideal for me.
     
  9. Hristo Avramov

    Hristo Avramov Active Member

    Everything breaks when you choose a small window so the ad is not a problem. its the way sites are designed. Content gets hidden when the window is not enough to display it.
     
  10. Myke623

    Myke623 Active Member

    But isn't that the whole point behind a Responsive design? So that things don't break when they get smaller? :) Sorry if that's wasn't clear in my original post, but I was trying to have everything working together in a responsive design.
     
  11. Brogan

    Brogan XenForo Moderator Staff Member

Share This Page