Responsive Design: Why isn't css responding to mobile screen size?

Question

I am working with Skeleton, a responsive CSS framework, and for some reason the css isn't responding to the mobile media query when the screen size is a mobile width.

It is responding to the tablet media query, but it reverts back to the standard CSS widths after the screen gets into the mobile sizes.

This is the live site I'm working with:

http://fine-grain-2.myshopify.com/

Here is the HTML I'm working with:

<div class="container">
    <div class="one column alpha">One</div>
    <div class="eleven columns omega">Eleven</div>
    <div class="two columns alpha">Two</div>
    <div class="ten columns omega">Ten</div>
</div>

Here is the mobile media query CSS:

/*  #Mobile (Portrait) 
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */   
        .container .offset-by-one,              
        .container .offset-by-two,                  
        .container .offset-by-three,                
        .container .offset-by-four,                     
        .container .offset-by-five,                     
        .container .offset-by-six,                  
        .container .offset-by-seven,                
        .container .offset-by-eight,                
        .container .offset-by-nine,                     
        .container .offset-by-ten,                  
        .container .offset-by-eleven,                           
        .container .offset-by-fifteen { padding-left: 0; }           

    }    


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .one-third.column, 
        .container .two-thirds.column { width: 420px; }
    }

Here is the tablet media query CSS that is working properly:

  /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container { width: 768px; }
    .container .column, 
    .container .columns { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

    .container .one-third.column                { width: 236px; }
    .container .two-thirds.column               { width: 492px; }       

    /*****************************
        12 Column
        ((768/12) - 20) * 1 = 44
    *****************************/

    .container .one.column                   { width: 44px;  }
    .container .two.columns                  { width: 108px; }
    .container .three.columns                { width: 172px; }
    .container .four.columns                 { width: 236px; }
    .container .five.columns                 { width: 300px; }
    .container .six.columns                  { width: 364px; }
    .container .seven.columns                { width: 428px; }   
    .container .eight.columns                { width: 492px; }
    .container .nine.columns                 { width: 556px; }
    .container .ten.columns                  { width: 620px; }   
    .container .eleven.columns               { width: 684px; }   
    .container .twelve.columns               { width: 748px; }



    /* Offsets */   
    .container .offset-by-one                { margin-left: 64px;  }
    .container .offset-by-two                { margin-left: 128px; }
    .container .offset-by-three              { margin-left: 192px; }
    .container .offset-by-four               { margin-left: 256px; }
    .container .offset-by-five               { margin-left: 320px; }
    .container .offset-by-six                { margin-left: 384px; }
    .container .offset-by-seven              { margin-left: 448px; }
    .container .offset-by-eight              { margin-left: 512px; }
    .container .offset-by-nine               { margin-left: 576px; }
    .container .offset-by-ten                { margin-left: 640px; }
    .container .offset-by-eleven             { margin-left: 704px; }

Answer 1

I notice in the skeleton.css on your live site, the media query:

@media only screen and (min-width: 768px) and (max-width: 959px) { ....

does not have a closing }.

I hacked it in Chrome using a local copy of the css and it seemed to fix it for me. What do you reckon?

Answer 2

The default media query for mobile devices is smaller than you are providing. Are you trying to target a specific mobile device that you know fits within those width amounts? If not here is the code for targeting the iphone and other usual smart phones:

   /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

Here's a link to an article about media queries and more code snippets for targeting other devices, including a particularly interesting one for targeting only the iphone4 and not other smart phones: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/