How to use different layout depending on screen size?

Posted by playfulwolf on November 19, 2012 at 6:06pm

Hi,

For those who say that it is default functionality: please read carefully, because I cannot express clearly in english :)

So, my question is: How to display different layout configurations depending on the screen size - is it possible with Omega to clone the functionality of AdaptiveTheme? What I mean is for example when user with iPad visits the site - some of the side regions are in the bottom of section, when user visits the site in HD resolution - they are in the side of section.

It is quite impossible to do that with media queries, but it is more or less possible with Context and Delta. The problem is, that I have found only single module https://drupal.org/project/context_resolution which is made for that, also it may be not suitable for phones/tablets with rotating screens and it is very fresh and untested.

What are your solutions? How to do this in "Omega way"
Thank you.

Comments

Read the Omega documentation

Posted by quantos on November 19, 2012 at 7:36pm

Read the Omega documentation PlayfulWolf. It's all there. And it's all there. A quick way to test what Omega does by default would be to throw some content in and see what happens. Generally speaking all the content regions will stack one under another from top to bottom. I presume you have a design in mind while trying to figure this out?

I have read ALL the Omega

Posted by playfulwolf on November 19, 2012 at 7:54pm

I have read ALL the Omega documentation and many of the screen-casts. What do I want is intermediary layout: it is NOT all the regions in one column but rather in different column configuration. If you used any of AdativeTheme sub-themes you know what I mean

Example

"HD" resolutions (>1200px width)
|----content----| |-sidebar1-| |-sidebar2-|

"Tablet" resolutions (~800-1000px width)
|----content----| |-sidebar1-|
|----------sidebar2------------|

Mobile resolutions (<800px width)
|----content----|
|----sidebar1---|
|----sidebar2---|

Omega can do "HD" and "Mobile", but not "Tablet". Again, AT themes have this in the settings page.

Correct me if I am wrong.

^{drupal+me: jeweler portfolio}

@ PlayfulWolf Omega has by

Posted by hanspln on November 21, 2012 at 7:49am

@ PlayfulWolf Omega has by default the following layouts:

Mobile
Narrow
Normal
Wide

You can alter the mediaquery on narrow such that it works up to 1000.

I was about to say you can't

Posted by quantos on November 21, 2012 at 9:39am

I was about to say you can't do that with standard omega/context as context doesn't support resolution detection but I just spotted this new module:

http://drupal.org/project/context_resolution

I haven't tested that yet but will. Full cudos to and support for theDuke there. That module would be a God-send for everyone creating responsive Omega layouts. I'll test it later too.

Good luck Wolf.

I am sure there is a better

Posted by Red Sky Tom on November 24, 2012 at 12:29am

I am sure there is a better answer as I am only new to Drupal and Omega but the couple of times I have had to do this I used PHP to clone everything from my sidebar2 into an empty region (that was full width and forced to render), and then used CSS to display/hide and size where needed.

Good Question

Posted by 3djeff on December 14, 2012 at 12:28am

@ PlayfulWolf

I have the exact same question as you've stated here. Unfortunately, I've not seen the answer yet. While searching for an answer, I found this post by Jake Strawn that stated the following:

With Omega though, Any of these simplified "default behaviors" can easily be manipulated by any means a themer normally would use to adjust the positioning, sizing of regions and grid classes via CSS at various levels. So at a 960 (normal) layout, you may want all the sidebars inline with the content, but at a smaller 720 layout, you may instead want only one sidebar beside the content, and the next to shift down below both items. This can be accomplished with just a line or two of CSS as needed in any situation.

Unfortunately, there was no further explanation of how to accomplish it. Would love to see an example of the 'line or two of CSS' that would do this - display different layout configurations depending on the screen size like below:

Content Zone - Normal
content region - sidebar first region - sidebar second region

Content Zone - Narrow
content region - sidebar first region
sidebar second region

I have yet to see a silver

Posted by Red Sky Tom on December 14, 2012 at 1:34am

I have yet to see a silver bullet but you can move the sidebar second region below by adding #region-sidebar-second {clear: left;} to the narrow CSS and #region-sidebar-second{clear: none;} to the normal CSS. You would however have to then style the widths in the CSS for each Zone.

@3djeff To do something like

Posted by kkuhnen on December 14, 2012 at 1:43am

@3djeff

To do something like that, you could adjust the widths of the sidebar first and sidebar second regions in the THEMENAME-alpha-default-narrow.

For example, if you have a 12 column layout set up like this:
Content (grid-6) -- sidebar first (grid-3) -- sidebar second (grid-3)

In THEMENAME-alpha-default-narrow.css, set region-sidebar-first to have a width equal to grid-6 and set region-sidebar-second to have a width equal to grid-12.