Weird white space in one page design

Support
#1

Hi - I’m getting white space on the right hand side of my webpage under the masthead. It’s a one page design based on Ethos demo 3. You can see what I mean in the attached screenshot (red arrow). It’s not there on a mobile if that’s anything of a clue? Thanks, Neil

#2

Hello @neilhartley,

Thanks for asking. :slight_smile:

Can you please share the website URL? I tried checking the URL you have assigned in Licence manager page and few of then are not loading, on one website I am getting message that it’s down for maintenance, and rest of the website I am unable to replicate the issue on my end.

Thanks.

#3

sorry, it’s www.dominodigitalmarketing.com

#4

Hi again,

There is a custom CSS that is conflicting with the page, please go to you Cornerstone’s CSS section and find and remove the following code:

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

Let us know how this goes!

#5

I don’t remember why we added the second CSS there but the first was added because the scrolling wasn’t working correctly on mobile - the nav wasn’t working.

#6

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

#7

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.

#8

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.

#9

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.

#10

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…

#11

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.

#12

Thanks, I just added it to the reply above…

#13

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

#14

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.

#15

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

#16

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.

#17

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

#18

Hi there,

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

Thanks!

#19

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

#20

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!