overflow-x:hidden is not working in mobile

Hi,

I had this issue when using bootstrap. Have you tried using media queries to define a mobile and tablet screen size? For example

/* ----------- iPhone 6 ----------- */

@media screen and (max-width: 375px) {
    body {
        overflow: hidden;
    }
}

/* ----------- iPad mini ----------- */

@media screen and (max-width: 768px) {
    body {
        overflow: hidden;
    }
}

You could also consider adding an !important tag to the media query rules in order to overwrite any other CSS that may be causing this.

/* ----------- iPhone 6 ----------- */

@media screen and (max-width: 375px) {
    body {
        overflow: hidden!important;
    }
}

/* ----------- iPad mini ----------- */

@media screen and (max-width: 768px) {
    body {
        overflow: hidden!important;
    }
}

See this url for all media query px sizes - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/[^]


Hope this helps!