The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Specific media query styles ignored on browser & mobile

  • # September 12, 2012 at 11:28 am


    I’m just about done with this website (, but I am facing two issues that are bugging me…

    1) The media query set

    “@media screen and (max-width: 320px)”

    is being ignored ONLY on desktop browser, despite me not specifying device type.

    2) When viewed ON MOBILE (max-width: 320px) the style

    html, body {

    is being ignored. If you scroll to the right there appears to be white space, where the 320px should of already ended.


    # September 12, 2012 at 11:43 am

    What is it supposed to do below 320px on a desktop browser that it isn’t?

    # September 12, 2012 at 12:27 pm

    This reply has been reported for inappropriate content.

    Well mostly it would help me diagnose the 2) issue, plus I’m just curious why it won’t take.

    # September 12, 2012 at 1:09 pm

    If you’re testing on an iPhone it should be `min-width: 320px`, not `max`.

    # September 12, 2012 at 3:21 pm

    This reply has been reported for inappropriate content.

    TheDoc – Yeah, I suppose I can do that. I was trying to avoid giving the desktop style sheet a media query which is what I would have to do if I’m using min-widths instead of max-widths.

    # September 12, 2012 at 4:43 pm

    If the media query isn’t supposed to apply to desktop, then you can just use `min-device-width` and `max-device-width`. I’m not really sure what you’re going for, though.

    # September 12, 2012 at 6:50 pm

    This reply has been reported for inappropriate content.

    This is how I have my document setup after my desktop styles…

    /* Smartphones (portrait and landscape)

    @media only screen
    and (min-width : 320px)
    and (max-width : 480px) {

    / Smartphones (landscape)

    @media only screen
    and (min-width : 321px)
    and (max-width : 480px) {

    / Smartphones (portrait)

    @media only screen
    and (max-width : 320px) {

    Why the heck is ONLY my desktop browser ignoring the “portrait styles” in favor of “landscape styles” despite me scaling the window to 320 or below?

    And secondly, why is my iPhone accepting all my portrait styles EXCEPT for html, body {width:320px;} ?

    Except for throwing out the “device” parameter from Scott’s boiler plate, everything else is the same.

    *updated OP website

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed