How to add custom CSS per media query in Omega 3 theme?

Question

My Omega 3 theme has the following layouts in the grid settings:

Narrow layout: all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)

Normal layout: all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)

Wide Layout: all and (min-width: 1220px)

I need to add some custom CSS within each media query. At the moment ive added them within my existing custom CSS file by copying the media query and adding an @import.

@media all and (max-width: 739px) {
    //styles
}

@media all and (min-width: 740px) and (min-device-width: 740px), 
(max-device-width: 800px) and (min-width: 740px) and (orientation:landscape) {
    //styles
}

@media all and (min-width: 980px) and (min-device-width: 980px), 
all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape) {
    //styles
}

@media all and (min-width: 1220px) {
    //styles
}

Is there a better practice way of doing this / what are the other ways? Is there a way that integrates with the theme more fully?

Answer 1

Part of the magic of Omega3 is that it does that for you!

Omega will always load the global.css file. If you are in a mobile layout (too narrow for a grid), that is the only file that loads. When you increase the browsers width to narrow, then omega 3 dynamically loads:

global.css
SUBTHEME-alpha-default.css (loads for all non-mobile-layouts)
SUBTHEME-alpha-default-narrow.css

If you keep increasing your browsers width to the normal layout, then these css files are loaded:

global.css
SUBTHEME-alpha-default.css
SUBTHEME-alpha-default-narrow.css
SUBTHEME-alpha-default-normal.css

Note that any CSS definitions you have in SUBTHEME-alpha-default-normal.css will override definitions in global.css, SUBTHEME-alpha-default.css, and SUBTHEME-alpha-default-narrow.css

To answer your question then, custom CSS for the narrow layout should go in SUBTHEME-alpha-default-narrow.css, custom CSS for the normal layout goes in SUBTHEME-alpha-default-normal.css, and custom CSS for the wide layout goes in SUBTHEME-alpha-default-wide.css. Just put it in and let Omega3 do the rest!

See https://groups.drupal.org/node/156719 for more info