CSS, Omega theme - how to make a <li> use 2 or 3 grids depending on screen with?

Question

This question applies to Omega theme, but I think it is general to any responsive grid based theme.

Is there a method to make a <li> occupy either 2 or 3 grids, depending on screen width?

In other words, when the body tag has class responsive-layout-wide then the <li> should occupy 3 grids (as if it had omega class grid-3) and when the body has class responsive-layout-normal it should occupy 2 grids (as if it had omega class grid-2). (The body class is determined using media queries by Omega theme)

Currently the HTML looks like this:

<li class="mydiv grid-2-normal grid-3-wide"> </li>

At design time I don't know the screen width, so I applied both possible classes. So currently, despite of the screen width, the <li> width is always 3 grids because grid-3 is added last. Does Omega have any tools to make it dynamic?

The origin of this question lays here: http://drupal.org/node/1571938, unfortunately it is not explained to the end. The Views Columns Class module says:

So you can apply alpha to the 1st, 5th, 9th blocks and omega to the 4th, 8th, 12th blocks but also apply alpha-mobile to the 1st, 3rd, 5th blocks and omega-mobile on the 2nd, 4th, 6th blocks. This gives the freedom to the theme to apply the styles that would render a display of 2 columns for smaller screen resolutions and 4 columns for larger screen resolutions.

So, I will end up having multiple styles for a <li> (like e.g. grid-2-normal and grid-3-wide) and my theme is supposed to react to screen width and intelligently apply appropriate style to change the <li> width. Width measured in grids (columns), not in pixels. But how this can be achieved, how to render a display of 2 columns for smaller screen resolutions and 4 columns for larger screen resolutions? Where "display" means a view display, not the whole page layout (that's what I think)

Answer 1

I don't know if Omega can do this out of the box, but I don't think so. Some base themes that use the grid system can change a size based on whether a column next to it is empty, but this isn't one of those conditions.

Your best option is to use the grid-2 size in the config for that region, and then if you want it to be different, put an override for mydiv in one of the sheets that get enabled by the media queries (narrow, normal, or wide). In your case you would add something like

.mydiv { width: 280px; }

to yourtheme-alpha-default-wide.css The actual width will vary based on whether you are using 12, 16, or 24 columns, and you may need an !important, too.

Answer 2

Taken for the theme's page:

Omega allows for contextual layouts (different layouts/settings for various portions of a site) through integration with Delta and the Context module.

Never done it myself to guide you but I believe what you want can be achieved by using these 2 modules. The documentation is always the best way to start.