Weird white space in one page design

@paul.r made that recommendation a couple of weeks to one of my other support requests

Hello There,

Did you remove the code already? I could no longer replicate the issue.
This is how I see your site now:

If you need anything else we can help you with, please let us know.

No, I didn’t remove the code but the problem is still there. You have to scroll down below the masthead and you’ll see the issue is still present.

Hi there,

I am another support staff. I also checked the case and I used both the Safari and Chrome browser on my Macbook and could not reproduce the problem you gave the screenshot:

Please check your website with another browser or another machine. Also, try to clear your current browser cache and make sure that you are using the latest version of the Safari browser.

Thank you.

I just checked again and the problem is still there. I don’t know if you scrolled down below the masthead and back up again? If you do that then you’ll see the white space is still there…

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

Thanks, I just added it to the reply above…

Hi there,

I do have a similar problem and I never had it before, just that my sides are alot bigger even to top and bottom around my block. My header is working fine, the global block single view is working brilliant, all animations are fine, just this white space is in the way.

Website: http://mediatypewriters.com/hometry/

What I have tried so far:
Removed all CSS global and custom settings;
Changed the global page color > Figured out that it isn’t an issue with the fullwidth settings;
Checked all margins and padding I could found.

But I can’t find the issue, any suggestions?
And how can I remove the standard margin of the content towards the header and footer?

Many thanks in advance.
Regards Jannes

Hello There,

I have checked your site and I could not see any space next to the scrollbar:

To remove the standard margin of the content towards the header and footer, please edit the page and change the page template by using the Blank - No Container | Header, Footer page template. For more details about the different page templates, please check this out: https://theme.co/apex/forum/t/features-page-templates/50/1

Hope this helps.

That was the solution, I still had it on fullwidth. Many thanks!
Regards Jannes

Hi @neilhartley,

I logged in to your website and I couldn’t see the issue.

But when I logged out, I could replicate this issue on my end.

It might be the caching issue. Could you please temporarily disable all the cache plugins in your website?

Thank you.

Did you scroll down (per my note above). The white space only appears when you scroll down below the masthead…

Hi there,

You mean the semi-transparent bar above upon scroll? That’s your empty header bar, you should delete it :slight_smile:

Thanks!

The template is set to Blank - No Container | Header, Footer. That’s not the problem. Also, please check the images at the start of this thread - I’m talking about white space on the right hand side after you scroll down below the masthead…Neil

Hi there,

I see it now, it’s a scrollbar but without visible scroll control. You should remove these custom CSS

html, body {
    overflow: scroll !important;
    height: auto !important;
}
      html,
      body {
        overflow: hidden !important;
        height: 100% !important;
        background: none;
      }

Thanks!

Yes but they were added to ensure the scroll on mobile was working correctly (your recommendation to solve a previous support query)…

Hi there,

I have gone ahead and review the other thread that you have mentioned. Is the page in questiond still the Custom Under Construction page? By default, the fixed top menu will have a relative position on mobile unlike what is set on desktop view because if the menu area will have fixed position on mobile, it will cover some of the content of the page where the viewing space is limited.

For example this:

As what you can see, when the mobile menu is set to fixed position just like on desktop, it will cover some of the page contents as you scroll through the page when it is collapsed.

However, you can override the default CSS and force the menu area to display fixed by using this code:

@media (max-width: 979px) {
    .x-navbar-fixed-top {
        position: fixed;
    }
}

If you want the collapsed navigation to close as you click on a menu item, please add this code in the JS panel of the page:

jQuery(function($){
  
  $('.mobile .x-nav a').on('touchend click', function(){
    $('.x-btn-navbar').click();
  });

});

You can now then remove the code below that is causing the issue on desktop:

html, body {
    overflow: scroll !important;
    height: auto !important;
}

Again, please note that the code suggestions I have provided are overriding the default behavior of the theme and they are based on your current setup. There is a chance that those codes will not work in case there is something on your setup changes or for any other reason. In case this happens, it will be your responsibility to maintain and update the code accordingly.

Hope this helps.

OK, thank-you. I appreciate your help…

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.