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):

1. **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).

2. **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).

3. **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?

Example:

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!

Comments

vinoth.3v’s picture

Drupal 7 does allow you to specify media queries when adding CSS files in theme info

; Add a style sheet with media query
stylesheets[screen and (max-width: 600px)][] = theStyle600.css
webby7097’s picture

I'm working on the same issue and haven't found the solution yet. I want the default 960 grid, but want to add in a 'portrait' layout that will take my 3 column layout down to two on a portrait oriented tablet. Thus far, it either shows a reduced size three column (larger tablets), or drops it to one (smaller tablets). How can I add in a new layout between the existing ones? I've found instructions for adding a wider one, but not a smaller one, and adapting those instructions hasn't worked for me thus far.

dasjo’s picture

Version: 7.x-4.0-alpha6 » 7.x-3.x-dev

seem like this applies for the 3.x queue