Media Queries: Mobile keeps adding space??

[JoshWhite]

Hi all, I was hoping to get some help from experienced media query brains. I’m really sitting down to learn how all of this works and how best to develop with media queries in mind. Problem I’m having is the inconsistency of the mobile platform.

For example, I’m sitting here with two different phones – a web OS phone that’s 320×400 native resolution, and also an Android phone that’s the same resolution (htc hero).

The main problem is that both of them seem to be rendering all kinds of white space to the right of the content. The Android phone correctly cuts the content off at the screen at least, but the Web OS wraps the text about 200 pixels to the right.

In testing, I removed everything except for the body tag and the same amount of horizontal space is being applied. So I think I’m missing something fundamental in how I’m requesting either the width, or maybe I’m missing a trick or quirk with mobile stylesheets? I just notice how the sites from http://mediaqueri.es/ are all uniform, and I can’t seem to figure out what the difference is.

Anyone have any ideas? Here is the Linky to the little sample I put up. Thanks in advance!

[ralusek]

The exact same thing is happening to me. Iphone adds about 100 pixels to the right of my site.
Worth noting: my body is set to overflow-x:hidden !important; and width:100% !important;
I’ve done this with and without important declaration. My Samsung Galaxy S2 displays the page properly, but will allow me to scroll to the right slightly beyond the bounds of the page.

Also worth noting, is that on the Galaxy at least, the problem only exists when the phone is held vertically. I can’t test on iphone atm.

[ralusek]

Okay I figured it out, the solution is that you need to set both html and body’s width/overflow.

html, body{
width:100%;
overflow-x:hidden;
}

[Author]

Posts