Centering content for mobile devices

Huhu · Post by **Huhu** » Wed Jan 15, 2014 3:27 pm

Out of interest: Centering seems to be quite a topic with css. While I didn't encounter too much trouble it seems to be something of a challenge to center the main div for mobile devices such as iPhones.
Normally, I would apply

Code: Select all

#mainpane {
marign: 0px auto; 
(...)}

and even text-align:center; which seems to be good for some IEs.
But this does not seem to do the trick for mobile devices, does it?

Post by **yellowled** » Wed Jan 15, 2014 7:29 pm

Huhu wrote:Centering seems to be quite a topic with css.

Erm, no?

The “old approach” did in fact need text-align: center; – I think IE < 7 needs that. If you still have to support IE < 7, my condolences. Nobody these days really has to support any IE < 8, unless you have a very special group of visitors. “In the real world” (i.e. anything but some Asian countries and some corporate intranets), IE < 8 is dead.

The common approach is to apply margin: 0 auto; (note that the top and bottom don't have to be zero) and a definite width (does not have to be fixed, can be in percent or em or whatever) to the container which is supposed to be centered.

This also works on mobile devices. If it does not work on mobile devices (of any mobile OS), there's probably something wrong with the content inside of the centered container. Likely candidates are images or tables. For any further advice, I would need an example, though (preferably a live blog).

YL

Post by **Don Chambers** » Wed Jan 15, 2014 8:35 pm

yellowled wrote:.... and a definite width (does not have to be fixed, can be in percent or em or whatever) to the container which is supposed to be centered.

It also might help to take a hint from YL's 2k11 template by using <meta name="viewport" content="width=device-width"> in your template's <head>.

Having said that, I have also read a recommendation to avoid setting width to device-width because some devices, such as the iPhone, set the same width regardless of whether the phone is held portrait or landscape. One such recommendation I read was to use <meta name="viewport" content="initial-scale=1">. The same article also suggested using this conjunction with the following css:

Code: Select all

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

and possiblt this for IE10:

Code: Select all

@-ms-viewport{
    width: extend-to-zoom;
    zoom: 1.0;
}

@YL - Have you considered using content="initial-scale=1" instead of content="device-width" in 2k11 or any other template(s)? I tried it on one of my sandbox copies of 2k11, and do think it works better for my iPhone 4. I don't have any other mobile devices to try it with though.

Post by **yellowled** » Wed Jan 15, 2014 9:41 pm

Don Chambers wrote:Having said that, I have also read a recommendation to avoid setting width to device-width because some devices, such as the iPhone, set the same width regardless of whether the phone is held portrait or landscape.

That used to be a bug in iOS 6 which is fixed in iOS 7 and is handled by the iOS Orientationchange Fix in 2k11. I'm not aware of any other mobile OS having issues with this.

Don Chambers wrote:One such recommendation I read was to use <meta name="viewport" content="initial-scale=1">.

That is supposed to do the same thing as the fix I mentioned above, I think. I never used it this way, but I do now usually use it this way:

Code: Select all

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

However, that hasn't (yet) made it into 2k11 since I'm not sure if and how this might react with the Orientationchange fix. I might be able to test this and include it in the upcoming 1.7.5. Maybe.

YL

Post by **yellowled** » Wed Jan 15, 2014 10:16 pm

yellowled wrote:I might be able to test this and include it in the upcoming 1.7.5. Maybe.

Okay, done.

It does seem to work well with the Orientationchange fix, at least on my iPhone 5 on iOS7. I also use this already in the responsive backend for 2.0, so I'm actually a bit baffled I didn't use this for 2k11 before … thanks for reminding me of it.

YL

Post by **Don Chambers** » Thu Jan 16, 2014 2:27 am

yellowled wrote:That used to be a bug in iOS 6 which is fixed in iOS 7 and is handled by the iOS Orientationchange Fix in 2k11. I'm not aware of any other mobile OS having issues with this.

My bad - I said I had an iPhone 4, but forgot to mention I am running IOS 7.0.2...not quite the most recent, but newer than ios6. Not sure "width=device-width" is even necessary, if you are also using "initial-scale=1". But I will admit to not being as up to date as you might be on the latest html and css.

Anyway, happy to see you have addressed it for 2k11... clearly the best template s9y has!!!

Huhu · Post by **Huhu** » Thu Jan 16, 2014 9:22 am

Thanks for the tips!
@yellowled I will first test if it works now before I would take more of your time.
By the way, your 2K11 css / responsivity looks VERY impressive. I must give it a try!

That reminds me that an overview over the most popular/highest-quality templates (especially interesting since these two viewpoints do not always meet ...) with short lists of their most important features could be a great help, could it?

Post by **yellowled** » Thu Jan 16, 2014 11:55 am

Don Chambers wrote:Not sure "width=device-width" is even necessary, if you are also using "initial-scale=1".

width=device-width is the actual viewport width of the device (the “screen resolution”). This is important since we now might encounter devices with retina (high resolution) screens. On those screens, width and device-width are actually different, but in most cases, you'll want to work with the device-width in @media queries.

For example, the iPhone 4's display resolution is 640x960 pixels, yet it's device width still is 320x480 (like the iPhone 3). That's because (expressed very simplified) the retina display crams 2 pixels into one.

YL

Post by **Don Chambers** » Thu Jan 16, 2014 4:45 pm

yellowled wrote: width=device-width is the actual viewport width of the device (the “screen resolution”). This is important since we now might encounter devices with retina (high resolution) screens. On those screens, width and device-width are actually different, but in most cases, you'll want to work with the device-width in @media queries.

Found some excellent info about viewports on Apple's safari guide. One particular sentence there addressed what we are talking about:

"For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation."

So, device-width does not need to be expressly stated IF scale is set to 1.0, but it certainly doesn't hurt.

Post by **yellowled** » Thu Jan 16, 2014 10:42 pm

Don Chambers wrote:So, device-width does not need to be expressly stated IF scale is set to 1.0, but it certainly doesn't hurt.

Remember that Safari is not the only mobile browser and iOS not the only mobile OS.

I've been using width=device-width for ages and initial-scale=1 since it was safe to use in iOS7, never ran into any issues on iOS, Android or desktop. The important thing, however, is never to use maximum-scale=1 because that limits the ability to zoom completely.

YL

Post by **Don Chambers** » Fri Jan 17, 2014 1:47 am

we're on the same page my friend!

Centering content for mobile devices

Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices

Re: Centering content for mobile devices