CODEWITHSUNDEEP
iphonecssipadsafari
Daniel Baars
Daniel Baars

Reputation: 51

CSS: iPhone / iPad Safari adds extra margins or padding around elements?

The site I am currently working on (roemlunchdinner.nl) looks fine in all major browsers but Safari on the iPhone and the iPad seems to add extra margins or padding around elements on the lower part of the page. I have tried setting the margins and padding to zero on all relevant elements, setting specific widths etc. but to no avail. I cannot reproduce this is any other browser. Anyone here has an idea what is going on here?

I am new here so am not yet allowed to post screenshots. Here are the links to the screenshot I would have liked to post:

Safari Windows screenshot

Safari iPad screenshot

Upvotes: 4

Views: 9680

Answers (3)

Intacto
Intacto

Reputation: 557

add css to element or related class: padding:0 @important!;

Upvotes: 0

Priya
Priya

Reputation: 921

try using media queries for ipad @media only screen and (device-width: 768px) { your css... }

give different width and see. Hope this helps

Upvotes: 0

ceejayoz
ceejayoz

Reputation: 179994

Mobile Safari resizes elements based on its best guess of what's going to be readable for the user.

You can override this behaviour across the entire site by doing this in your CSS:

body { -webkit-text-size-adjust: none; }

or you can target just individual elements.

Upvotes: 2

Related Questions