I'm using the AT Two column 33/66 layout in Display Suite and on mobile the left 33 column stacks above 66 column. I would like to flip that so on mobile the left 33 column would fall below the 66 column.

Is there a trick to doing that easy with browscap or something or is the best way to create a custom layout/css?

Thanks!

Comments

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

You can sort of do this, by using Mobile Detect module and the Mobile Regions extension, which is not a pure media query/CSS solution but rather old school device detection. Doing this in CSS is quite tricky unless you know the central columns height (always) because of limitations in the float layout model. You could detect the heights with JavaScript and write inline CSS, but I never went this route in the theme because its not a very reliable technique.

fallenturtle’s picture

fallenturtle CreditAttribution: fallenturtle commented

I tried the solution using the Mobile Regions extension (I used Browscap and not Mobile Detect) but I'm only seeing the blocks layout regions. Can this method be extended to control regions within the Panels/Display Suite AT layouts?

Thanks again for this and also your theme in general,
Andrew

fallenturtle’s picture

fallenturtle CreditAttribution: fallenturtle commented

I figured it out. I duplicated two_66_33 layout, made left right and vice versa. If anyone wants a copy I can post it.

Thank goodness, I was worried I might have to wash your car's windows.

fallenturtle’s picture

fallenturtle CreditAttribution: fallenturtle commented
Status: Active » Closed (fixed)
fallenturtle’s picture

fallenturtle CreditAttribution: fallenturtle commented
Status: Closed (fixed) » Closed (won't fix)