CSS/SASS: Media Queries not being read/seen

Question

I'm using Ruby on Rails and I have all my styling set in application.css.scss as so

body{
    //GLOBAL STYLES

    @media only screen and (max-width: 770px){
        //MOBILE ONLY STYLES
    }

    @media only screen and (min-width:771px) and (max-width:1040px){
        //TABLET ONLY STYLES
    }

    @media (min-width: 771px){
        //STYLING COMMON TO BOTH TABLET AND DESKTOP
    }

    @media (min-width: 1040px){
        //DESKTOP ONLY STYLES
    }

}

When I resize my browser all, the media queries seem to work fine but none of the mobile styling is showing on my phone. Any help as to why this is would be much appreciated.

Answer 1

Responsive

Although I'd love to declare media queries on a per element basis, we've only had it working before by calling them explicitly on their own:

#app/assets/stylesheets/application.css.scss
@media screen and (max-width: 770px){
   body   { ... }
   footer { ... }
}

@media screen and (min-width:771px) and (max-width:1040px){
   body   { ... }
   footer { ... }
}

You can see some of our responsive styling here

--

By the way, media queries are not specific to SASS/SCSS :)