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?