Overflow-x:hidden; on mobile device not working

Found the answer actually here on Stack overflow:

The browsers on mobile devices ignore the overflow-x:hidden within the body and html tag if <meta name="viewport"> tag is present, thus i created a wrapper in the body tag covering the rest of my content with a overflow-x: hidden in it, solving the problem.

Documentation:

Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers.

The bad thing is that it prevents the use now of a jquery plugin, that scrolls....

Try setting minimum-scale=1 instead of maximum-scale=1.

minimum-scale controls how far out the user can zoom, while maximum-scale controls how far in they can zoom. To prevent viewing of the overflow you need to limit the user's ability to zoom out, not in.

As pointed out by Dorvalla, body and html tags are ignored by smartphones browsers, although not by "big screen" browsers, I solved the issue by using the first child of the page structure, so no need of an aditional wrapper.

e.g. for my WordPress case:

    .site {
        overflow-x: hidden;
        /* Unnecessary IMHO, uncomment next line to force hidden behavior */
        /* overflow-x: hidden !important; */
        /* Additional tunning proposed by the community */
        position: relative;
        width: 100%;
    }