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; }

score 5 · Accepted Answer · answered Feb 02 '13 at 12:42

5

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?

answered Feb 02 '13 at 12:42

typeslug

96
3

Your detailed review and answer of my question made my day. I showed my wife and she couldn't believe a complete stranger would devote their time to help. I will be sure to pay it forward. Thanks! – novicePrgrmr Feb 02 '13 at 13:15
1

You're welcome. I would recommend you use a text editor/ide that validates your code as you go along. I wouldn't have spotted this myself if I hadn't cut 'n' pasted the stylesheet code into my editor (netbeans). – typeslug Feb 02 '13 at 13:23

score 0 · Answer 2 · answered Feb 02 '13 at 12:24

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/

I'm sorry, I had only added the portrait mobile CSS. I have updated the question with both, as Skeleton uses separate media queries for portrait mobile and landscape mobile. It's not the widths that are the problem, it is that the media query is not being recognized. — novicePrgrmr, Feb 02 '13 at 12:33

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

2 Answers2