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)