CODEWITHSUNDEEP
cssoverflowmobile-safari
Ian
Ian

Reputation: 261

Overflow-x iPod touch

I'm creating a mobile version of a site. I have 3 divs, each 33.33% wide of a body with a width of 300%, (so they're all the full width of the screen), floated left so they're all side-by-side, and you can slide between the divs by clicking links.

I've added overflow-x: hidden; to the body tag to remove the horizontal scrollbar. This works fine on a desktop, but on my iPod touch, I can still drag and scroll horizontally using my finger, which I don't want.

Upvotes: 0

Views: 398

Answers (2)

Galen
Galen

Reputation: 150

You need to have a width of 300% on a wrapper element within the body. If you have both a width:300% and overflow-x:hidden on the body, you'd only be hiding content within the body if the content you wish to hide is greater than 300% wide.

See my example using a wrapper within body.

Upvotes: 2

Colin Kenney
Colin Kenney

Reputation: 597

Try adding this to the HTML head section:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

This will set the width of your page to the width of the device viewing it. On an iOS device it will also disable the pinch-to-zoom gesture.

Upvotes: 0

Related Questions