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

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

Discussion in 'Resolved Bug Reports' started by Lone Wolf, Aug 8, 2013.

  1. Lone Wolf

    Lone Wolf Well-Known Member

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

    Screenshot_2013-08-07-19-15-35.png

    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.
     
    Alien and Shelley like this.
  2. CyberAP

    CyberAP Well-Known Member

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

    Shelley Well-Known Member

    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.
     
    Lone Wolf likes this.
  4. Brogan

    Brogan XenForo Moderator Staff Member

    Yours was the add-on I suggested.
     
    Lone Wolf likes this.
  5. Lone Wolf

    Lone Wolf Well-Known Member

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

    Shelley Well-Known Member

    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?
     
    Alien and Lone Wolf like this.
  7. Mike

    Mike XenForo Developer Staff Member

    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.
     
    Shelley likes this.
  8. Lone Wolf

    Lone Wolf Well-Known Member

    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.
     
    Jay likes this.
  9. Giray

    Giray Member

    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?
     

Share This Page