Grow your CSS skills. Land your dream job.

Media Queries: Mobile keeps adding space??

  • # September 18, 2011 at 3:38 am

    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!

    # May 9, 2013 at 1:48 pm

    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.

    # May 9, 2013 at 2:00 pm

    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;
    }

    # May 9, 2013 at 3:32 pm

    That’s a good catch-all, but in the end you shouldn’t need to do that. Since I’ve posted that, most of my projects are responsive now days and I’ve always found the culprit was some kind of width that wasn’t fluid by the time it made it to the smaller screen sizes. The one thing that concerns me about the overflow hidden is that you might be cutting off something useful and not know it.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".