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..