An omega 3.0 child theme has been setup with the aim of looking good on a "normal" layout (lets say 1200x1000) and putting some exceptions into "narrow" to make some fonts smaller and hide some blocks.

At the the moment the theme is "sort-of" responsive, when reducing the page size some columns fold. I'm pretty sure I've missed something though.
With the settings/weights below, I expected that the normal.css would be loaded first, then narrow.css overriding (when the screen size is smaller).

In sclabs4-alpha-default-narrow.css there is some css to reduce the main-menu font size, and this works as expected when one reduces screen size.
However, when I add in css to hide a block in narrow.css, it hides it for all screens.

All site css is in sclabs4-alpha-default.css.
Settings are as follows:
- Enable the responsive grid=1, Allow customizing viewport=1, View port scale initial=1, min=1, max=3, scalable by user=1 (this allows zoom via "pinching" on the Ipad)
- Narrow layout is enabled, weight=1, media query:
all and (min-width: 140px) and (min-device-width: 140px), (max-device-width: 800px) and (min-width: 140px) and (orientation:landscape)
Note: I had to change reduce the px from the standard 740px, otherwise there was no theme at all on smaller displays - how the media queries work with omega mystify me a bit .-)

- Normal has weight2, media is the standard:
all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape)

- Wide and fluid are disabled.

Apologies is the above is not that easy to understand.. thanks in advance for any tips..

#2 omega_css.png51.12 KBboran
Members fund testing for the Drupal project. Drupal Association Learn more


dhalbert’s picture

However, when I add in css to hide a block in narrow.css, it hides it for all screens.

I believe you are seeing this because it turns out that the narrow.css gets loaded for all widths. See my support issue about this.

For narrow, just narrow gets loaded. For normal, narrow, then normal get loaded. For wide, all three get loaded: narrow, normal, wide, in that order.

So I believe the specialized setting you made in narrow.css must be undone in normal.css.

boran’s picture

51.12 KB

For narrow, normal is loaded too, otherwise my site would look very bad :-)
I notice you kept the default 740px in the media query for narrow.

I'd also agree with what you said about default getting loaded twice (I forgot to mention that)... a pity there were no answers to your issue so far.

- Have you figured out where the code is that causes the default to be loaded twice, and that controls the loading order? Its pretty complicated (to me).
I've noticed what is in the .info files and then the entrails in alpha/includes
drupal_add_css() is called in alpha_css_include() alpha_libraries_include() alpha_grid_include()

Hmm. Adding dpm($theme) to alpha_grid_include() shows that $theme>css contains a list of alpha and omega css files and in $theme>grid one sees the complete list of child theme css. See attached.

alpha_grid_include() seems to load the css in sequential order (it does not lookup weights for example).

Have you experimented with changing the media queries and weights?
How do you see the exact list of css loaded, in what order? When I disable css compression my site no longer works the same.
Not sure about what next, any suggestions?

dhalbert’s picture

Title: Gettnig narrow.css to contain only narrow overrides » Getting narrow.css to contain only narrow overrides

I believe the default css is included with narrow, normal, and wide (thus causing it to be loaded multiple times) because you just might set up the media queries so only one is triggered, and you want to make sure the default is loaded.

But as I asked in the other issue, the way the media queries are currently constructed, narrow gets loaded on narrow and anything wider, normal on normal and anything wider, and wide on anything wide. I don't know whether that's intended, but I'm reluctant to change the media queries to be more specific without understanding the rationale for the current setup.

I did try varying the weights, but that just messed things up. I didn't need to vary the widths, so I didn't try that. Also I haven't tried the CSS consolidation yet: it didn't occur to me it would be different, but it sounds like I should be worried, based on your experience

I asked about this on #drupal-omega IRC, but no one took the bait. Maybe I need to ask during the next doc sprint.

boran’s picture

I just did some more experiments, hiding some blocks in Narrow:
#block-nodeshow-nodeshow {
display: none;
and then making them visible in default:
#block-nodeshow-nodeshow {
display: inherit;
That worked nicely..

Kendall Totten’s picture

Status: Active » Needs review

I'm not 100% if this is what you are asking, but I've started making my media queries that pull in the stylesheets for narrow, normal, and wide mututally exclusive. Meaning I am also specifying a max-width breakpoint. That way when the site loads at a "wide desktop" size, the only stylesheets being pulled in are global, default, and wide. It seemed silly to me to load narrow and normal at this size, so I got rid of the overlap. I do this by editing the media queries on the theme settings page.

My narrow media query: all and (min-width: 740px) and (max-width: 980px)
My normal media query: all and (min-width: 980px) and (max-width: 1220px)
My wide media query: all and (min-width: 1220px)

Don't be afraid to tweak the media queries to what you need, that's why they are exposed on the settings page. It's hard to have a one-size-fits-all solution for everyone.

lilbebel’s picture

Thank you Kendall! I've been scratching my head trying to figure this out and your solution is perfect.


Katy Jockelson’s picture

Hey there,
Thank you starryeyez024, this is exactly what I was looking for - how to be able to add rules to narrow layout that don't then filter upwards to affect normal and wide.

The only thing is that I *am* afraid of tweaking the media queries! Can you tell me how your inclusion of 'and (max-width: 980px)' fits in what's what's already there i.e. 'all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape)'

The landscape stuff is confusing me and the existing max-device-width rule. Can you tell em exactly what you end up with in the media query field?

Thanks so much

steinmb’s picture

Status: Needs review » Postponed (maintainer needs more info)

Old issue, nothing to review here. Close it?