I have the following setup with my stylesheets in a Rails 3.2 application. I have an application.css file with many styles defined in them, and several other files for more specific styles, like everything to do with the footer is in footer.css.

In development, everything works, but in production, none of the mobile styles in the required files are compiled i.e. everything above the @media only screen and (min-width: 768px) line for each of the stylesheets.

The main application.css file has about 700 lines of styles defined, after which it also has a @media only screen and (min-width: 768px) media query in it. Inside the media query is about another 700 lines overriding the previous 700 lines of styles, for desktops. These styles, however, are successfully compiled. I don't understand why the required files don't work the same way.

application.css

*= require_self *= require base.css *= require footer.css .benefit { display: block; font-size: 0.8em; margin: 1em; } @media only screen and (min-width: 768px) { .benefit { font-size: 1em; margin: 3em; } } # All above styles compile

Base.css

header, section, footer, aside, nav, article, figure { display: block; } html, body { height: 100%; background: #DEDEDE; } # Above styles don't compile @media only screen and (min-width: 768px) { # Below style does compile body { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); } }

footer.css

footer { background: #ffffff; width: 100%; } # Above style doesn't compile @media only screen and (min-width: 768px) { # Below style does compile footer { background: none repeat scroll 0 0 #000; color: #818A8A; padding: 0; } }

Edit: I tried explicitly adding the required css files' mobile styles in their own media queries as was suggested in this answer and the code update below but it didn't work.

footer.css