I’ve building this site for a client, and I can’t seem to find what is causing the horizontal overflow that causes the website to scroll horizontally outwards on mobiles and tablets (safari).
I’ve tried implementing all the header and footer codes in related community posts. I’ve also attempted to go through everything to put an overflow hidden on anything I was able to.
But there are a few things that I couldn’t put that overflow on - dues to the design of elements needing to overlap.
I also went into xray mode and had no luck finding the culprit(s)
You could try opening the live website on chrome (assuming it happens on every browser) and right click on the right side space and inspect it, it should tell you what elements are pushing right.
I’ve found a solution to the issue, and I think its was simply because I had elements that had to run off the side of the page and not have overflow hidden - due to animation and non-square overlapping elements.
So, I’ve placed all content in a “page wrapper” div, assigned it as ‘relative positioning’ and hide overflow. So basically between ‘body’ and all the internal content sits this page wrapper that holds everything.
I’m not sure if this is best practice, but considering I’ve used all the code suggested in previous posts with no luck, this could be a solution for those people like myself struggling to get past this issue.
