I've noticed that the default media queries for Omega are set up to trigger on a minimum width and don't untrigger on a wider width. The default CSS loading is below, with a brand-new subtheme named otest.

So, for instance, for a 1000px-wide display, all and (min-width: 740px) and (min-device-width: 740px) will be true, and otest-alpha-default-narrow.css will get loaded. Then, all and (min-width: 980px) and (min-device-width: 980px) is also true, so otest-alpha-default-normal.css is also loaded.

In addition, otest-alpha-default.css gets loaded twice.

** Is this intentional? If so, what's the reasoning? I find it a little painful, because I have tweaks in the narrow stylesheet that I must then undo in the normal stylesheet. I'd rather have the default queries load only a single width stylesheet. I can always change the queries, but then I'm changing a fundamental way the Omega CSS stacks. Thanks.

Out-of-the-box CSS loading is below:

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)">@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default-narrow.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/omega/alpha/css/grid/alpha_default/narrow/alpha-default-narrow-12.css?lvap3r");</style>
<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)">@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default-normal.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/omega/alpha/css/grid/alpha_default/normal/alpha-default-normal-12.css?lvap3r");</style>
<!--<![endif]-->

<!--[if gte IE 9]><!-->
<style type="text/css" media="all and (min-width: 1220px)">@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/otest/css/otest-alpha-default-wide.css?lvap3r");
@import url("http://mydomain.org/sites/all/themes/omega/alpha/css/grid/alpha_default/wide/alpha-default-wide-12.css?lvap3r");</style>
<!--<![endif]-->

Comments

dhalbert’s picture

Issue summary: View changes

slight tweaks

seiplax’s picture

You can read about the CSS in --> How CSS works in Omega - "Ogres are like Onions... They have LAYERS" http://drupal.org/node/1298700

The question it does not answer is how to use default.css - what is the purpose, doesn't narrow.css fill the same function?

dhalbert’s picture

Status: Active » Closed (works as designed)

Thanks a lot for the pointer to http://drupal.org/node/1298700. I had read that but it didn't sink in.

As for the purpose of default.css, what I have used it for is to undo some mobile-only thing in global.css that I want for all of the narrow, normal, and wide cases, or at least two out of three of them. For instance, in default.css I will display: inherit or display:block something that I had hidden with display: none in global.css for the mobile-only case.

Mark_L6n’s picture

Post #5 here has an approach for solving this.

Mark_L6n’s picture

Issue summary: View changes

typo