Mobile Safari Centering Content Problem

My Problem with Mobile Safari Centering Content

I ran into an issue with one of my sites and had difficulty finding the solution spelled out so I figured I’d write about it here. I could not get Mobile Safari centering content correctly. The page worked fine in Safari, IE, Firefox, anything I tried on Mac or PC, but on mobile Safari centering content failed.

I decided to try experimenting to see if I could replicate the problem, and I very easily did. From my experimenting, I found when content was larger than 960px wide, I could not center other content that was narrower. In my case, I had a wide top image and a 960px content column in the bottom. In Mobile Safari, that content below the top, wide image would left align. It would left align wether I centered using margin auto on the left and right, or used the left 50% and negative 1/2 with left margin centering option. Both these solutions worked elsewhere.

A ‘duh’ moment

Earlier in my development of this page, I had set the meta viewport to be 960px. I think at the time the top portion of the page was going to be that width. It appears that may have been partially to blame. The solution is to set the meta viewport to the widest content. Once that was done, centering worked exactly as expected. In my reading, I think the tipping point width is actually 980px, but I have not verified that. I should mention that my simple recreation of the problem did not have the viewport set initially, so it being set low was not really the issue. It needs to be set correctly.

So, the lesson is if your site is wider that 980px, set the meta viewport to the width. It’s probably best to always set the viewport to the proper width, but if your site is wide, it’s essential.

Published by

Dan

Been a programmer, primarily in the internet space, since late 1997. Google+ Profile

2 thoughts on “Mobile Safari Centering Content Problem”

  1. Holy guacamole. This was kind of killing me. Every device but my phone looked great and was nicely centered. But my content on my iphone gave a weird right margin and was floating left. Ack! Your point about the wider elements throwing off the smaller ones TOTALLY helped!! I made my content have the same min-width as the wider element (my header) and all is right again.

    Thanks!!

Leave a Reply

Your email address will not be published. Required fields are marked *