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
Comment #0.0
dhalbert CreditAttribution: dhalbert commentedslight tweaks
Comment #1
seiplax CreditAttribution: seiplax commentedYou 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?
Comment #2
dhalbert CreditAttribution: dhalbert commentedThanks 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
ordisplay:block
something that I had hidden withdisplay: none
in global.css for the mobile-only case.Comment #3
Mark_L6n CreditAttribution: Mark_L6n commentedPost #5 here has an approach for solving this.
Comment #3.0
Mark_L6n CreditAttribution: Mark_L6n commentedtypo