Horizontal scroll on mobile

[Dan]

on the mobile version of the site there is an horizontal scroll which I can’t wrap my head around.
Don’t understand where it’s coming from.
Using Gutenberg and GP blocks.
This is a temp url:
http://dd0ab622208e.ngrok.io/

Any ideas?

Thanks!
Dan

[Dan]

this is a screenshot with the issue:
https://www.dropbox.com/s/lsybte967ei0mzo/gp-mobile.png?dl=0

[Leo]

Hi there,

The URL isn’t working for me.

Can you double check?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

can you try this link:
http://0230cbd7bef0.ngrok.io/

Thanks

[Nadine]

Hi, I am having the same exact issue. Have checked all the site settings. On some pages, the mobile version has a horizontal scroll. The site is http://www.green-waves-coaching.de (it’s on the home and about me page. The others seem to be fine.)
How can I fix that? I am using the GP premium with elementor.

[David]

Hi there,

looking at the Home page you are using the Elementor Stretch section option to make the full width.
Which is not a great option as it uses JS to recalculate the width of the element.

I would suggest you remove the Stretch option.

And enable the GP Page Builder container to Full Width for the pages you’re using a pagebuilder on:

https://docs.generatepress.com/article/page-builder-container/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

I’ll upload the site to the server so you can take a look.

Dan

[Nadine]

Thanks for the fast reply! I don’t seem to have the option. I can only set the container width to a fixed no of pixel. In the menu there is just “container” but not “page builder container”. Do I have to enable any other settings in GP so I can get this setting option?

[David]

Thanks Dan – let us know where its available

Nadine can you raise a new topic where we can address your issue directly.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Nadine]

Ok, I found it on the specific site settings. I was looking at the general Customizer options. I changed the setting according your suggestion. The issue still exists.

[David]

Nadine, you need to edit each of your Elementor Sections and in the Section Settings disable Stretch Section

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

Hi David,
I’ve uploaded the site:
https://www.agrobee.co.il/

On mobile (or using the chrome inspector) you can see there is a gap on the left hand side.
I am not using any page builders, just GPP and GP blocks.

Thanks
Dan

[David]

On some of your Grid Columns you have 30px left padding. You can set this to 0 in the Settings for Mobile. Or instead of using padding on the inside of the Column i would suggest increasing the vertical column gap on the Grid parent.

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dan]

Thanks David, that solved it.
I would think that the mobile grid would reset it’s columns padding to 0 to avoid these kind of issues.

Appreciate your help.

Dan

[Nadine]

Hi David,
thank you, did so, but still… it seems only to be on pages which have a disable – show page image. that’s the only thing I could find that they have in common.
Best regards
Nadine

[Author]

Posts