CODEWITHSUNDEEP
htmlcssipadmobile-safari
jsuissa
jsuissa

Reputation: 1762

Prevent iPad mobile Safari from cutting off content via CSS

Having an issue where the iPad cuts off content.

While the width exceeds the iPad resolution, I don't understand why it just doesn't add horizontal scrolling as opposed to the cut off.

Any insights as to how to best adapt for this would be greatly appreciated.

The site is here and a screenshot is attached.

This is probably the part of the code at issue:

#wrapper {
position:relative;
width: 1180px;
margin: 0 auto;
}

iPad acreenshot

Upvotes: 2

Views: 13251

Answers (2)

Jonathan Wilson
Jonathan Wilson

Reputation: 4305

If you remove overflow:hidden from your wrapper divs, you'll get the appearance you want. I just confirmed this using Adobe Shadow's Remote Inspection (demo) on my new iPad. After doing this, you'll want to reinstate the viewport clipping with the meta tag to prevent scrolling: <meta content="width=768px, minimum-scale=1.0, maximum-scale=1.0" name="viewport">

Interestingly, something in your code is restricting the width of your <body> element. Tracking that down might yield a better solution.

Upvotes: 2

jos
jos

Reputation: 431

Assuming it's your webpage you're editing and not the ipad's fault... In your css I suggest either setting width to auto or to 100% to try to remedy it?

Isn't an Ipad's screen 1024px, less than what you're setting it to? Depending on the other code you could be forcing it to be wider than the screen allows?

Also please do the suggestion above. Didn't notice that until he pointed it out.

Upvotes: 0

Related Questions