Archived topic

Overflow-X issue with Full-width Container

7 replies · Started by Alok Sharma on January 11, 2022

Viewing posts 1–8 of 8

January 11, 2022 at 2:51 am #2076312

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.

January 11, 2022 at 10:03 am #2076937

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

February 21, 2023 at 2:57 am #2540937

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?

February 21, 2023 at 4:57 am #2541061

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

February 21, 2023 at 5:19 am #2541081

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.

February 21, 2023 at 5:43 am #2541111

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:

https://www.screencast.com/t/a6jAi9AyMKv

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

That will stop the overflow.

February 21, 2023 at 5:51 am #2541120

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!

February 21, 2023 at 6:56 am #2541191

Glad to hear that !

This archived topic is closed to new replies.

Start building better websites today.