Happy Monday to all!  

Has anyone ever encountered unintentional, horizontal page sliding when viewing your site from a mobile device?  The glitch doesn't show from my desktop otherwise I could make a video and it's not just my phone it's happening on.

Some pages have the new ability to now slide to the left and back again while others are still scrolling up and down like any good site should.  

I've compared settings from those pages that work with those that now don't but nothing stands out.  It's as if the responsiveness is turned off on the right side of my site, the page doesn't slide any farther to the right than before but suddenly has extra room on the right and so now slides left a few inches.  Like my page is too big on one side.

It's a stab-in-the-dark hoping I'll make any sense and someone actually know what I'm talking about but I've tried everything I can think of to identify the cause.  I've avoided posting the question here for several hours but not sure what else to try.

Thanks.
I had the same problem. My issue was an element that had the wrong width specified. I had to go through and delete sections and see what made is not scroll to the side, then add it back and see what width adjustment I had to make. 
That would make the most sense and I feel like I've been through every layer/element.  Do you happen to remember if it ended up being the Display, Size, or Position that was wrong?
mine was a container - size - width issue. I made min/max to auto or none. (Sorry I'm not even close to an expert just wanted to let you know that how I got my issue fixed)
No apologies necessary my friend!  I've only been at this since August and while I'm definitely making strides, I still feel super new.  Very grateful for your response and that does give me an idea of what I might have missed, thank you!!!  
Hi Timothy Michaels I would recommend you to start looking on the sections of your site giving you the issue, and select the option of overflow hidden, refresh your site and inspect the site again.
This will stop any content wider than the one you've set, and once you have found the problem you can target that area.
Another useful trick is using the xray mode and hover over elements, as you can see margins, paddings etc.

If you feel comfortable you can share the project link and I will be happy to have a look. If none of the options I mention above has worked.

 



Hi ! I had the same problem once. I had reviewed everything but finding no logical cause I ended up using custom code like :
<style>
body {
overflow-x: hidden;
}
</style>
(everything that exceeds the body in width is hidden so no horizontal scrolling)
The ideal remains to find the exact cause :)
Very interesting, I wonder what the cause is.  I'm partially glad to hear I'm not the only one except then that means more people are struggling with a glitch that's not their fault.  

Anyway, I just added your code to my site in several places but no noticeable changes.  I definitely appreciate you sharing though!

Thank you!
Timothy Michaels I put that code in the project settings > custom code > head code and it worked for me. You can try this one to 'force' if needed (by adding !important):
<style> body { overflow-x: hidden !important; } </style>

Let me know.
Timothy Michaels and maybe you'll have to set a width to the body... 100% (that's what I see on my project but sorry I did it two years ago and don't remember exactly what I tried)
What I usually do to find the problem is going into inspect mode into mobile view and then select all. In most cases because all elements are highlighted you see the one that is causing the problem. 
That actually sounds genius, Marcel!  Are you selecting all in design mode or published mode, and what sort of anomaly should I expect to see, something obvious and something specific?  Only asking because nothing really seems to be standing out.  But it makes sense that we should be able to see something.  Thanks man! 
Timothy Michaels The published website, you usually see the selection color of an item. It can also work to hover with the mouse over the code sections to see what lightsup in the extra scroll space. When you see a section light up you know it is in there and them you just dive deeper into that section till you found the element that needs tweaking. There are real short cuts to this, but at least like this you can find it a bit quicker.
Marcel Deelen I had an issue where for some reason when a container or div was set to 100% it would show longer than the width in mobile view. Only after did I change it to Auto did it resize correctly. 

Post a comment

Log in