[Support request] Overflow-X issue with Full-width Container

[Alok Sharma]

Hi,

Ref: https://generatepress.com/forums/topic/horizontal-scrollbar-on-align-full-items/

I have added a GeneratePress Container block and set it to full-width.

The problem is that it creates a horizontal scrollbar if there is a vertical scrollbar present and not otherwise.

However, this is not happening with Beaver Builder. If I add a Beaver Builder module and set the container width to full-width, the container does not overflow irrespective if there is a vertical scrollbar or not.

To further debug this issue, I tried this with Astra theme and couldn’t reproduce this issue.

Please refer to the links in the private fields.

[Leo]

Hi there,

Can you try applying this setting first?
https://docs.generatepress.com/article/content-container/#full-width

Tom’s reply here should explain everything as well:
https://generatepress.com/forums/topic/horizontal-scrollbar-on-align-full-items/#post-1771522

[DAVID]

Hi – to follow on from Aloks comment above, I have the same issue – overflow of a full-width container.

I have followed the instructions above to set the page’s content container to full width, then Tom’s comments on how to fix the overflow error by building the page in containers and applying individual widths to each section.

The page is built using generate blocks containers and some have full width (alignfull) applied to them, while others have none as the option for that.

I am still getting the overflow issue with a scrollbar at the bottom of the page.

Is there any way to have mixed widths on a page to get that groovy look without an overflow bar in generate press?

[David]

Hi there,

if you use the Full Width Content Container, then make sure you DO NOT use the Align Full / Wide Width options in the blocks toolbar.

If you can share a link to your site where i can see the issue, then i can take a closer look

[DAVID]

Hey thanks for the reply David. I have obviously completely misread Tom’s instructions then.

here’s a link – buddycrm .com – front page is where the issue is.

I wasn’t using the full-width container option prior to reading the support on this – I changed it to full-width as I thought that would fix it but the issue continues. I have read elsewhere that I could do:

html {
    overflow-x:hidden;
}

but haven’t resorted to that yet.

The issue seems to be in the css:

.no-sidebar .entry-content .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}

If I remove that then no issues but I guess it is doing some other task I don’t know about. Thanks.

[David]

Many of your Container Blocks have the Full Width option selected from the blocks toolbar.
Which in turn adds the ( terrible ) alignfull class to those blocks, see here:

First thing is to edit each of the Containers and uncheck the Full Width option in the blocks toolbar.

That will stop the overflow.

[DAVID]

ok thanks for checking it out David.

I have updated the page now and figured it out as you said. Setting the page container to full width is the answer and removes having to use the align full tool in gutenberg.

thanks for your assistance.

EDITED: As I figured it out. Thanks!

[David]

Glad to hear that !

[Author]

Posts