White space on horizontal mobile scroll

[gulejvladimiras]

Hi . I have problem in my wordpress website https://naturallineshop.com when scroll to left right on mobile. All content moves right left, and sometimes dissapears. I try disable, hide owerflow in html, body but it change nothing, maybe someone
knows solution,please help

[TechnoBear]

I’m not seeing any problem, testing on a desktop browser and resizing the window.

I would suggest you start by validating your HTML and CSS, to eliminate errors.

The W3C Markup Validation Service

https://jigsaw.w3.org/css-validator/

[PaulOB]

@TechnoBear

I’m not seeing any problem, testing on a

I’m on a mobile at the moment and can see the white space. Unfortunately I can’t debug on mobile so it will have to wait until I get back to my computer.

The issue will likely be that some element is oversized or at a fixed width greater than the viewport width. It’s a matter of looking at the elements in devtools and spotting the one that doesn’t fit.

It’s usually a 2 minute job to spot as you can just turn off whole sections via devtools (display:none) until the problem goes away and then you can narrow the culprit quickly.

Edit:

Had a quick look and it looks more complicated than expected. It seems to be some sort of js slideout function as the page is translated dynamically to the left & right so there is some JS at work here. It looks like some sort of horizontal pager but there seems to be no next page.

I’ll have another look in the morning but I’m guessing this is some plugin that you have implemented that is going wrong and may not be easy to fix.

[PaulOB]

I see a warning in the console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL>

There’s an article here that seems relevant.

Making touch scrolling fast by default - Chrome Developers

I’m not sure if its anything to do with the problem but it mentions unexpected scrolling of items.

You may need to disable your plugins one by one to see which one is causing the problem as I don’t believe its a css issue due to the translateX being dynamically applied. If you disable JS then there is no whitespace at the sides. Your slidemenu may be the first thing to check.