1

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?

2
  • The title for this question does not seem to relate to its content. Please supply an alternative title. Oct 24, 2013 at 11:00
  • I'm also interested, I use like this @media screen and (max-width:1024px){ }
    – Bala
    Oct 31, 2013 at 11:13

1 Answer 1

0
+50

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.