[Resolved] Full Width Container Padding issue Right Scrolling

[Simon]

Hi everyone,

I’ve discovered a possible bug with the full container settings for an individual block.

(Please, note when using the GP theme, the page template is default as I only want one block to be full width)

There appears to be an issue with the right margin that does not occur when using a default theme.

The result is horizontal scrolling of the page. Screen resolutions below 768px work correctly, it is only those above.

Here is a video, explaining the issue.

Kind regards,

Simon

[David]

Hi there,

its a really random issue thats dependent on the vertical scrollbar affecting the viewport width – oddly i have great difficulty replicating the issue myself. I even tried again now with the default theme settings and it worked ok.

As a note the TwentyTwenty and TwentyTwentyOne themes use the completely reverse logic – the page container has no max-width and instead they constrain the width of each element on the page, which is why its more reliable as everything is full width to begin with.

Problem is GP cannot simply apply that method due to it being a foundation theme that provides the options to change the layout entirely whereas the twenty* themes do not.

Personally if i require Full Width content even if it is only for a single element then l use the Full Width Content container and multiple container blocks for the defining full width and container width. Or use a Block Element to dynamically display the first ( or last ) blocks on the page.

But we are looking at better ways of applying full width in a contained page, to help could you let me know what your Customizer > Container, width, layout ( one container vs separate containers ) and padding options are?

[Simon]

Hi David,

I’ve included a screenshot of my Customizer settings as requested.

Also included is a screenshot of the container settings on the live site on Windows 10 using Chrome.

(In the video, I was showing on a Mac Mini M1 using Chrome)

I’ve tried reverting to the default theme settings on both the local install and the live site but still can’t resolve the issue.

Even when clicking the Make page full-width it doesn’t get rid of the side scrolling.

Here is the link to the live test page.

Kind regards,

Simon

[David]

Thanks for sharing this … i will pass this on to Tom as it completely puzzles me, as you can see here i cannot get the horizontal scroll bar to appear:

https://www.screencast.com/t/3Bua4sYi

[Tom]

Hi there,

Waiting for the day that a full-width solution is discovered that doesn’t include the scrollbar. It’s not happening to David because his scrollbar disappears and is overlayed when it appears.

The only way to fix this as of right now is this CSS:

body {
    overflow-x: hidden;
}

[Simon]

Hi, Tom & David,

Thanks so much for your help with this.

For the record, I am now answering this on my Chromebook and using Chrome not only does the scroll bar not appear but there is no side-scrolling. However, the same machine (it’s Linux based so I can switch to Debian) using Firefox, the side-scrolling and scroll bar are both present.

Using Tom’s code, however, sorts the issue on Firefox on the Chromebook and (obviously, lol!) the original report for the Windows Machine and Mac Mini M1 using Chrome, thanks again so much!

Kind regards,

Simon

[Tom]

No problem – glad we could help! 🙂

[Author]

Posts