- This topic has 5 replies, 3 voices, and was last updated 3 months, 3 weeks ago by Leo.
September 25, 2020 at 7:30 am #1458479Marcel
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.September 25, 2020 at 8:04 am #1458678DavidStaffCustomer Support
you have several elements in your content that are wider then the page.
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:September 25, 2020 at 8:22 am #1458706Marcel
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!September 25, 2020 at 12:13 pm #1459036LeoStaffCustomer Support
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?September 30, 2020 at 7:42 am #1465319Marcel
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
Thanks for your input though.September 30, 2020 at 8:14 am #1465537
- You must be logged in to reply to this topic.