Solution 1 :

this problem faced me and i have solution.

This problem because you make the menu to go right and this cause scrolling horizontally and overflow doesn’t work

Mobile Ignore overflow on body tag

Try to make div and hold your page content and give him
overflow-x: hidden.

It will work

Solution 2 :

enter image description here

The problem is related to the markers added by some lib, maybe the one taking care of the animations.

If you remove them before changing to mobile view, the space on the right side disappears.

Solution 3 :

I had same problem and for me was hepful overflow-x: hidden

Problem :

So I was working on a web development project using HTML and Tailwind css, Everything is looking fine on desktop mode but as soon as go to mobile mode the index page shows some extra space on the right side of the page. Tried using overflow-x :hidden but it doesn’t fix anything. I have attached the Image and Live demo of the project below.

Index Image

Heroku Live demo


Comment posted by David Harvey

The problem is with your “Our services” section. It pushes to the right when it hides and it makes the browser think that it’s there still.

Comment posted by Amit Deka

Thanks @DavidHarvey , the same problem is there with the service page too, so is there any fix for this or Should i have to add the animation from y-axis instead of x-axis.

Comment posted by Amit Deka

I have add the overflow-x: hidden class in the section tag and it worked. Thanks @Max

Comment posted by Amit Deka

I have removed the markers still no fix, btw those markers were from GSAP ScrollTrigger markers.

Comment posted by red

I can see it is happening yet.

Comment posted by Amit Deka

I haven’t push it to github yet.