How do I apply different css files to different viewports with Omega subthemes?

Question

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!

Answer 1

The way I see it you've got 2 options:

Option 1: Don't use multiple style sheets. You can have conditional elements in a single CSS file using CSS media queries like this:

// Default styles
.content {max-width:960px}

// Tablet styles
@media only screen and (min-device-width: 600px) and (max-device-width: 960px), screen and (min-width: 600px) and (max-width: 960px){
  .content {max-width:600px;}
}

// Phone styles
@media only screen and (max-device-width: 600px), screen and (max-width: 600px) {
  .content {max-width:100%;}
}

That will even work on a desktop PC with a small window. For more info go here.

Option 2: There is a way to include those conditions in a link tag. That way you can divide up your CSS files for easy viewing. Like this:

< link rel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="mobile-view.css" />

You'll have to include it manually. I don't know if drupal_add_css will work with media property. You might have to use drupal_add_html_head.

Answer 2

If you'd like to do it the Omega way, look into using Context as well as Delta, as it's pretty powerful with Omega.