Media Queries, mobile devices not responding

Question

This problem is with this site, http://www.sierraisadesigner.com, my portfolio site.

The media queries work just fine in Firefox, but not on any other browser or any mobile devices I've tried it on. I've tried the iPad first gen, an iPod, and the Kindle Fire (also the first gen).

The code I have is targeting a pretty wide range of screen sizes:

@media only screen and (min-width:700px) and (max-width:959px) {
    .wrapper-900 { width:100%; background:#ccc;}

    #content-bg { padding:20px 0px 0px 0px; }

    .width-200 { width:25%; }
    .width-550 {width:65%; }

    #footer { padding:15px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:550px) and(max-width:699px) {
    .wrapper-900 { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 10px 10px 10px; }

    .width-200 { width:25%; }
    .width-550 { width:65%; }

    TEXTAREA { width:90%; height:200px; }
    INPUT[type=text] { width:90%; }

    #footer { padding:10px; }
    .footer-module { width:25%; }
} 

@media only screen and (min-width:430px) and (max-width:549px) {
    .wrapper-900 { width:100%; }

    HEADER LI { background:#CCEFFF; padding:10px 15px 10px 15px; }
    #header-nav { width:100%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px; }
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:30%; }
} 

@media only screen and (min-width:320px) and (max-width:429px) {
    .wrapper-900 { width:100%; }

    .header-swirl { visibility:hidden; font-size:0.1em; }
    .header-name { font-size:1.8em; }

    HEADER LI { background:#CCEFFF; padding:7px; }
    HEADER UL { padding:0px; width:100%; }
    #header-nav { margin:10px 0px 10px 0px; }

    .slider-img img { width:150%; float:left; margin-left:-50%; }

    #content-bg { padding:20px 0px 0px 0px; }
    #content { padding:50px 0px 0px 0px; }
    .article { padding:15px 15px 15px 15px; }

    .width-200 { width:90%; padding:10px;}
    .width-550 { width:100%; }

    FORM { text-align:center; }
    TEXTAREA { width:80%; height:200px; }
    INPUT[type=text] { width:80%; }

    #footer { padding:10px; }
    .footer-module { width:90%; }
}

I've also tried using max-device-width instead of just max-width (or min-width) and it sort of works on the iPad but won't respond in Firefox and just acts really weird in Chrome. Help! What am I missing??

Brian Brian · Accepted Answer · 2012-10-11T16:29:19

You don't have the viewport meta tag:

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

Here's a (fairly long) helpful explanation of how this whole viewport deal works.

Media Queries, mobile devices not responding

1 Answers