Archived topic

gutenberg cause horizontal scroll

13 replies · Started by Andrea on January 16, 2019

Viewing posts 1–14 of 14

January 16, 2019 at 2:09 am #783318

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

January 16, 2019 at 7:02 am #783678

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.

January 16, 2019 at 7:06 am #783682

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.

January 16, 2019 at 7:26 am #783701

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?

January 16, 2019 at 8:06 am #783743

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.

January 16, 2019 at 9:35 am #783830

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

January 17, 2019 at 12:16 am #784316

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.

January 17, 2019 at 6:11 am #784526

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.

January 17, 2019 at 6:23 am #784532

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

January 17, 2019 at 6:40 am #784552

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?

January 17, 2019 at 7:15 am #784690

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..

January 17, 2019 at 8:43 am #784786

This is usually caused by an alignfull block, unfortunately.

Try adding this:

body {
    overflow-x: hidden;
}

January 17, 2019 at 8:54 am #784806

it work! thanks Tom!!

January 17, 2019 at 8:55 am #784808

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.