How to lock the screen width for any browser?

Question

Just go to this test website : ltdcoapp.uphero.com , from you smart phone and then slide the screen to see what is on the right and the problem is : that yes the screen slides and shows what I am trying to hide on the right side .

my attempts so far was to use body{overflow-x: hidden;} which only works with desktop browsers though .

can you please tell me what to do to prevent this ?

PS: I'm really not trying to get traffic to the website , but it is the only way to show you the problem easily

Answer 1

Have you set a corresponding width with your overflow:hidden property?

Edit: Relative values like 100% for your width won't work (as they'll also contain the right part of the screen). Fix it to absolute pixel values (in this example: 1024px):

body {
    overflow-x: hidden
    width: 1024px
}

It might also help to add the corresponding viewport meta-tags in the header:

<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />

Also, would disabling scrolling altogether be a solution? Disable scrolling in all mobile devices