Design issue Spacing around the header in responsive is not displaying correctly

[Lone Wolf]

I'm currently working on upgrading my site to XF 1.2 and I love the fact that the header is responsive. But I'm having a problem with large gaps above and below the header.

As all webmasters know, above the fold screen space is prime real estate and on mobile devices every inch of space should be fully exploited.

However the responsive header takes up almost 3 times the space that it should. My own site is still in beta so I will use BBS by @Shelley as my example. The pic below is from my Galaxy S3...



As you can see from that example the header and spaces above the menu take up nearly 3 times the space of the header itself and pushes more of the actual content below the fold. I have the exact same issue on my demo site.

Brogan suggested an add-on but I think this should work properly by default.

 

[CyberAP]

I'd consider this as a suggestion, not as a bug, because to fix that we need new style properties to control our logo in different viewport widths. That's why I created Respollo, to simplifiy that process quite a bit.

 

[Shelley]

I'd consider this as a suggestion, not as a bug, because to fix that we need new style properties to control our logo in different viewport widths. That's why I created Respollo, to simplifiy that process quite a bit.

I think being posted as a bug it'll get focused on quicker. I'd regard this as a bit of both actually but posting it in suggestions wouldn't hurt either I suppose. Eitherway, adding these options to the core I think needs to happen.

 

[Paul B]

Yours was the add-on I suggested.

 

[Lone Wolf]

Thanks Brogan and CyberAP but as Shelley says this should work out of the box. XenForo is no longer the new kid on the block its THE kid on the block.

 

[Shelley]

Personally I'm trying to lower the add-ons I install. I'm not trying to be difficult but every solution shouldn't be met with "use this add-on" when clearly this is a core option I feel without a need for another add-on installation, it's actually a legitimate suggestion/bug report/unfinished feature and obviously core candidate since mike made the logo responsive in the first place so that says something in itself. Is it a difficult and technical challenge to add options in the core it's like the logo is made responsive and just left as it (take it or leave it kind of thing).

It'll be interesting to see how this thread pans out, if needed I'll be posting this in suggestions if it goes the way I think it will go. @Mike - any thoughts on this?

 

[Mike]

The system XenForo uses for this makes this what basically has to happen. If you inspect the source, you'll see the header is actually at the end of the source code and then positioned absolutely. (This was done to move the content up in the page.) As such, the height of the header must be calculated and known.

Ideally, if this becomes a significant issue, you need to look at using an alternative logo at smaller resolutions and then adjusting the header height. It isn't really trivial to be honest.

It's not ideal obviously, but it's a fundamental design approach of the current (default) style.

 

[Lone Wolf]

Thanks for the reply @Mike but what about the excellent Respollo add-on by @CyberAP which fixes this issue via an add-on. Isn't it possible to do something like this by default.

 

[Giray]

I'm new to Xenforo. Tackling the same problem. Surprised, frankly. Responsive 101 should be responsive logo resizing, margins and padding to perfection! Any updates on this?