[Resolved] mobile navigation causing screen overflow

[Marcel]

Hi,

On one of my website in development I noticed screen overflow on mobile devices. I think it’s caused by the mobile navigation. I only have this problem on the homepage: https://sunrentals.k-dushi.com/.

Also when swiping down on a mobile the navigation only appears after a while while on other pages it keep sticking to the top immediately. If you want to I can also send screen shots and a screen recording showing this behaviour.

Thanks for your help.

[David]

Hi there,

you have several elements in your content that are wider then the page.
This looks related to using the Full Width option in the pagebuilder. It uses Javascript to do that and is not very reliable.

Instead of using that option we recommend you simply set the GP Page Builder Container to full width. Then all rows you add in the pagebuilder will be automatically full width:

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

[Marcel]

Hi David,

Your solution has three issues:

1. It didn’t solve the problem having elements wider than the page.
2. I’m using WP Bakery Composer and have most rows setup as “Stretch row” (but not the content). Switching the GP Page Builder Container to full width makes the content also stretch.
3. I have to change every page manually even if it solved the problem and if I could have the content not stretch.

Is it possible to find out which elements are wider than the page? Is there an easy way? I’ve tried finding them but the only thing I came up was the navigation menu. But maybe I’m wrong. For me it’s hard to find these elements.

Thanks again!

[Leo]

1. I’m not seeing the full width option David suggested being applied to the page. Can you confirm?

Please clear and disable your caching plugin for now.

2. When a page builder is used, our recommendation is to use the full width page builder container option then use the page builder itself to determine the width of the content.

3. There isn’t a simple solution for this unfortunately.

Is it possible to find out which elements are wider than the page? Is there an easy way?

Not really unfortunately.

I don’t think the menu is causing the issue – can you create a new page with some test content without page builder to see if the issue exist there as well?

[Marcel]

Hi Leo,

I actually did find a great way to find elements causing the horizontal overflow. I’m using Firefox Developer and it has the option to delete nodes. I just delete certain nodes (mostly rows) until the problem is solved. Then I add the css rule overflow-x:hidden;

Thanks for your input though.

[Leo]

Glad to hear 🙂

[Author]

Posts