omega-media-query-dummy div purpose?

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
dshumaker's picture
Posted by dshumaker on June 21, 2012 at 1:14am

Anybody know the purpose of the "omega-media-query-dummy" div right at the top of the body ?

I'm trying to find out why my omega media query doesn't seem to work. I see the "omega-mediaqueries-processed" class on my body element and am not sure how to interpret that either. I'm guessing that it means that the media query has indeed been "fired" or executed correctly.

Comments

I THINK it has something to

Posted by JSCSJSCS on June 21, 2012 at 5:40pm
JSCSJSCS's picture

I THINK it has something to do with loading some dummy.css for some versions of IE that have problems with z-indexes, or I could be completely wrong, as is often the case!

James Sinkiewicz
Drupal Site Builder and Generalist
http://MyDrupalJourney.com

Got it! Woo Hoo!

Posted by dshumaker on June 23, 2012 at 5:24am
dshumaker's picture

So after some experimentation I got it working !! Woo Hoo! Yay!

Here is what I was doing wrong. Hopefully this will help some one else in the future.

  1. Not being too familiar with media queries, I assumed that "loaded" or "imported" meant the same thing as "applied" or "executed". It doesn't. So when I did a page load and looked with firebug at my header section I would always see my css files loaded REGARDLESS of what size the browser was at. I assumed that the media queries somehow didn't load them if the media query was false. Turns out that you'll still see the "@import css" code at the top of your loaded page regardless of the condition of your media query. The key point is that the css code is not "applied" to your DOM or elements if the media query condition is false. That was a big ah hah moment for me.

  2. I was under the impression that you had to include your css files in your info file so that the media queries could decide whether or not to execute them. NOT SO. In fact the way they are loaded is by a css file naming convention that is not obvious IMHO. According to the documentation you copy all the starterkit css files (narrow, wide, normal and default) and rename them like so:

Let's say my theme name is omega_tm then my file names apparently would be:

omega-tm-alpha-default-normal.css
omega-tm-alpha-default-wide.css
omega-tm-alpha-default-narrow.css

However, because of the, not yet complete, documentation, I had to experiment to discover that this is true for the grid layout and not the fluid layout.

THREE. Poking around in my page header I saw that the alpha-fluid-normal-12.css was the one that was being loaded (or I should say applied because of the lesson 1 I learned) and not the alpha-default-normal.css that I thought was getting loaded. This lead me to think, hey maybe I should name my file :
omega-tm-fluid-normal-12.css and then it would automatically imported and applied. Close but no cigar. The file name that did end up getting loaded and applied was :

omega-tm-fluid-normal.css

I'm not sure why the 12 is left off but I'm stoked it's working now and I Really REALLY hope this helps someone. Headbanging is fun to music but not on the keyboard.

In sum:
1. Don't be alarmed by the imports in the page head of the size in-appropriate css file.
2. You don't need your css in the .info file.
3. Make sure you name your file correctly to get it automatically picked up by the media queries.

Happy Coding!