I´m working with an Omega 3.x Subtheme in Drupal 7. I´ve been reading the handbook of Omega, specially about the layered css files.
Even if I do understand that the layer structure of the default responsive css files is (from bottom to top): global → default → narrow → normal → wide, I can´t mach that to the Grid Settings UI, and I just can´t understand how "default" css file works, and for what layout.
These are the css files that I´ve got:
global.css = global
yoursubthemename-alpha-default.css = default
yoursubthemename-alpha-default-narrow.css = narrow
yoursubthemename-alpha-default-normal.css = normal
yoursubthemename-alpha-default-wide.css = wide
And these are the different default layout settings at the UI (/admin/appearance/settings/mytheme):
- Narrow Layout (weight 1) --> media query: all and (min-width: 740px) and (min-device-width: 740px), (max-device-width: 800px) and (min-width: 740px) and (orientation:landscape).
- Normal Layout (weight 2) --> all and (min-width: 980px) and (min-device-width: 980px), all and (max-device-width: 1024px) and (min-width: 1024px) and (orientation:landscape).
- Wide Layout (weight 3) --> all and (min-width: 1220px).
How about default css file? I´ve also noted that all mediaqueries are set: orientation:landscape, so how do I manage to apply different css files for portrait viewports?
I´ve got a phone (480 x 320), a Nexus 7" Tablet (1280x800), a 10" netbook (1024x600) and a 19" pc monitor (1366 x 768).
I´ve customized global, normal and wide css files, applying global.css to my phone (portrait and landscape), normal.css to my laptop and wide.css to my pc monitor.
cellphone orientation: portrait and landscape ---> css global file.
Works ok. It just takes the global file.
tablet orientation portrait ---> css ?? file.
It takes the global file, and it looks as the pgone, but bigger. I would like another template. I´ve tried the "default" css file, but it´s not "taken".
tablet orientation landscape ---> css ?? file.
I´ve copied all contents of "normal" to "narrow" css files, but that won´t work, because it´s a weird narrower result, even if its a copy of the normal css file.
netbook orientation landscape ---> css normal file
It works fine, it just takes the normal css file.
desktop monitor orientation landscape ---> css wide file
It works fine, it just takes the wide css file.
So, in other words, how do you apply the css templates to tiny viewports (cellphone), smaller ones (7" tablet), small ones (10" netbook), and bigger ones (big desktop monitor and maybe tv)?
Thanks for your help!