Width and scrolling issue on mobile devices

[eyedia]

Hi there! I am facing a problem with one of our websites. When loading a page on mobile devices (both emulated and on actual mobile device) the page is to wide for the viewport and triggers horizontal scrolling. This unwanted effect has kept me busy for quite a while now. I suspected it had something to do with rows not set to global containers, then I suspected a horizontal slide in ‘On Scroll’-effect. With these things fixed I got a couple of pages fixed but my luck ran out.

By hiding certain sections on the mobile breakpoint I have pinpointed the issue in the ‘Building your custom home’ section. Disabling ‘On Scroll’-effects and making the rows global does not seem to work here.

I was wondering if I can get some assistance on fixing this annoying bug. Details are in the secure note.

[ruenel]

Hello @eyedia,

Thanks for writing in! There seems to be an out dated plugins in your site. This could be the cause of the issue. Please do the following:

• Testing For Theme Related Issue
• Testing For Plugin Conflict
• Theme Update
• Child Theme
• Css/Js Customization
• Disabling Cache
• Disabling Cdn
• Version Compatibility

I also noticed that you have added this custom JS code in the Theme Options.

document.onscroll = function() {
    if (window.innerHeight + window.scrollY > document.body.clientHeight - 350) {
        document.getElementById('mobile-contactus').style.display='none';
    } else {
      document.getElementById('mobile-contactus').style.display='block';
    }
}

Please test the page without this custom JS as it may also be the caused of your issue. You may need to contact the creator of this JS code for further assistance as it pertains to the scrolling of the page.

Best Regards.