XF 1.2 Responsive design, header logo and another banner

[Marcel]

We're running a plugin to display banners opposite the header logo.
I've enabled responsive design and on it's own, works brilliant on all my devices.

Our header logo, (400x68), is left aligned at the top of the forum regardless of page. If the browser shrinks, the logo is resized accordingly.

Now the banners we're showing (roughly 400x68 too), I've added to display after the header_logo hook, in a simple div, with a float:right to right align it.

Works fine on a full size browser, as displayed below. I've used the default theme but the behaviour is the same.

Yet when I resize horizontally, the banner ad sticks to the right, then when it meets our logo, drops below it (this is fine), the navbar drops too (which is also fine), but the page content does not. Which means it looks pretty unsightly.



I'm baffled now. Ive done most other things, but I'm struggling to get my head round what should be something simple.

Also, the site header logo is scaled nicely according to the browser.
How can I display the banner ad on the right, opposite the header logo, then when the browser is resized, have the navbar act correctly too. (Well, the navbar is acting correctly, it's the rest of the page that isn't, is that right?)
I'd also like the banner ad to resize too when the browser is shrunk even further below the 400px wide mark.

Thanks in advance.

 

[Marcel]

Or actually, I'd prefer it if the banner ad didn't drop at all (maybe at a very minimal width), instead *both* banners (header logo and ad) were treated as equally important and started resizing at roughly browser width * 2.

 

[Paul B]

See these resources.

http://xenforo.com/community/resources/responsive-adsense.2084/

http://xenforo.com/community/resources/responsive-design.2193/

 

[Marcel]

Cheers Brogan. I've already been through those, and I think I understand the jist of it all. I've included responsive AdSense already (Sadly based on refreshes, not 'live', but still.....)

This just has my head pickled. I need coffee.
The float:right I'm using is partially key, as removing that does stop the navbar dropping of course, but the banner ad is obviously not right-aligned, which I require.

 

[Paul B]

The banner is too wide at narrower widths.

You need to use a smaller banner.

 

[Russ]

Another option you can look into is expanding the headerproxy depending on the resolution:

<xen:if is="@enableResponsive">

   @media (max-width:@maxResponsiveWideWidth)
   {
     #headerMover #headerProxy { height: 300px; }
   }
</xen:if>

Should note you'll still need responsive ads*

 

[Marcel]

Cheers Brogan. I know the banner is too wide. The problem is, when the page reduces width, I'd like to reduce them both equally, just like Xen reduces (scales) the header logo. I assume it's a CSS + code issue but I've no idea what.

Thanks Russ, I'll see if that makes it a bit prettier.

 

[Marcel]

Forgot to say, the banner ad I want to shrink / place opposite the header logo isn't adsense. This is a 468x60(ish) plain image file.

 

[Paul B]

In that case just use max-width:100% and it will resize automatically as the container size reduces.

 

[Marcel]

Thanks.
Well, I've tried every single combination of CSS I can think of, and I still can't get it to play nice.
Every time the browser is shrunk, the banner ad on the right drops below and then if you keep shrinking it pushes off the edge of the left of the page.
It won't scale at all. Although the header logo still scales and behaves nicely.

The closest I could get to some almost-acceptable behaviour was using Russ' code above (minus the if conditional), in extra.css.

On my iphone in portrait, this basically dropped the banner ad below the header, it also dropped the navbar a nice amount (I used 190px IIRC).
Unfortunately the banner ad was still a little too wide (I still need it to scale).

If I was confused before, I'm even more confused now.
I think it's to do with the plugin I'm using (Merc's Ad Manager, Test Build 28). That pulls the banner into the headerMover via a hook.
I think that this ends up that both banners are in different elements and thus one scales and the other doesn't)

 

[Marcel]

Actually come to think of it, I'd be happy to just remove the banner ad on all small mobile devices in portrait mode for now.

The plugin allows me to specify css to add to the banner ads, and I have it set to simply float: right;
The template that displays the banner is :

<div class="{$banner.css_class}" style="{$banner.css_style}"><a href="{xen:link end, $banner}" target="_blank"><img src="{$banner.imageUrl}" /></a></div>

How would I override this to remove the display of this div (or image) using the responsive design section of the style?

 

[Paul B]

Use a media query based on the browser width and display:none.

It's all explained in the resources.

 

[Phases]

Found this thread when I had the same problem. Installed the mentioned add-on and it helped some, with resizing logo and stuff However I was still getting the navbar pushing over the breadcrumbs.

Took a while to figure out. I know it's stated that it's all explained in the resources, but I had wished it were more spelled out. Here is what I did, for future folks. Seems to work well.

In breadcrumb template just about <nav>:

<style>
.minfix { height: 40px; }
@media(min-width: 575px) { .minfix { height: 0px; } }
</style>
<div class="minfix"></div>

Thanks!

 

[Bram]

@Phases where do I put this code exactly. I've placed it around the <nav> parts but without success.

 

[Phases]

@Phases where do I put this code exactly. I've placed it around the <nav> parts but without success.

I put it just above the nav tag, so the top of my breadcrumb template looks like so:

<xen:edithint template="breadcrumb.css" />

<style type="text/css">
.minfix { height: 40px; }
@media(min-width: 670px) { .minfix { height: 0px; } }
</style>
<div class="minfix"></div>

<nav>

It may not be one size fits all, mine was pretty precise to whatever I was doin' at the time with other elements. Try setting the min to like 140 instead of 40 and see if it drops stuff down, if so you're good, just adjust as needed.

 

[Bram]

Will give it a final try (Xenforo's header is shortening my life with at least 10 years ). Thanks for trying to help me out

 

[NeilTolbert]

Will give it a final try (Xenforo's header is shortening my life with at least 10 years ). Thanks for trying to help me out

Did this work for you? Having the exact same struggle.

 

[Mr Lucky]

I had a headache with two logos in the header. In the end my best solution was to remove the second logo for mobiles (medium responsive) using img class

@media only screen and (max-device-width:610px)
{.headerlogo2
{display:none !important}
}

And have it appear below that size under the navbar (ad_above_top_breadcrumb template)

.mobilelink

.mobilelogo2

{display:none}

@media only screen and (max-device-width:610px)
{.mobilelogo2
{display:initial;max-width:100%;height:auto;}
}

This looks better than having them both in the header on mobiles one above the other IMO as well as avoiding the issue with the navbar