[Resolved] gutenberg cause horizontal scroll

[Andrea]

Hello,

i’m using gutenberg for build my pages, but if i use “full width” option for media and text block this cause horizontal scroll, i think the cause is this 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;
}

how can i fix this bug?

thanks

[David]

Hi there,

any particular page or device that the problem is showing on?
I checked the home page top block on desktop and mobile and i am not seeing any overflow. Let me know.

[Andrea]

Hello David,

sorry meanwhile i used a not elegant method for fix using this solution found:

.alignfull {
margin-left: calc(50% – 50vw + 9px) !important;
margin-right: calc(50% – 50vw + 9px) !important;

}

if you now update the page the scroll is come back.

[David]

I can see the CSS has been removed but i still can’t see the problem 🙂
Can you clear your browser cache and check?
I am wondering whether autoptimize is creating a problem. If the issue persists can you clear its cache and disable it?

[Andrea]

Sorry, I forgot to tell you that this bug only appears using browsers like Chrome, Edge and Firefox.
In Safari on a Mac it does not show up.

[Leo]

Can you try using Full Width for this page?
https://docs.generatepress.com/article/page-builder-container/

[Andrea]

If i set Full Width with GeneratePress Option the scroll not appear but all my contents become wider and but i need to have most of my sections contained and not full width.

[David]

I am still not seeing the issue:

https://www.useloom.com/share/08de29aae6b24584ae97f5c97e19a9c2

In the video at the start i show there is a little sideways wobble on the page without any alignfull elements. Then i add that class to one section and still no horizontal scroll just the wobble. Then i repeat this with responsive mode.

So really hard to ascertain what the problem is.

[Andrea]

Ok, now i have restore the gutenberg full width version of the page, if you try to see now you will view the scroll.

[David]

hmmm… maybe its just me 🙂 but still not seeing it on Chrome / Firefox.
Could you test something, remove the alignfull off the current elements and then add an Image Block and set that to alignfull and let me know if that creates the issue?

[Andrea]

ok, now i’ve removed all alignfull on all blocks and inserted an image block with full-width option enabled and i still see the horinzontal scroll.

I’ve tried to see the page on 3 different computer with all (windows) browsers and i always see this scroll..

[Tom]

This is usually caused by an alignfull block, unfortunately.

Try adding this:

body {
    overflow-x: hidden;
}

[Andrea]

it work! thanks Tom!!

[Tom]

You’re welcome 🙂

[Author]

Posts