Grow your CSS skills. Land your dream job.

Specific media query styles ignored on browser & mobile

  • # September 12, 2012 at 11:28 am

    Hello,

    I’m just about done with this website (http://tinyurl.com/8ps7joa), 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 {
    width:320px;
    }

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

    Thanks!

    # 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

    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

    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 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. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    *updated OP website

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

You must be logged in to reply to this topic.

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