Hello again Jeff!

My fullscreen design has 2 %-based sidebars (on either side of the main content) like so:

A  | Main Content  | B

When the screen is tablet sized, I'd like to rearrange so that both sidebars are on the left, with B just stacking underneath A. Like so:

A  | Main Content
B  |

I started by using the 3rd layout in "Tablet Landscape" (which looks like A | B | Main Content) and tried to have B clear:left, but then B disappears entirely. This seems like it should probably be a pretty simple layout but I can't wrap my head around it!

Comments

Jeff Burnz’s picture

Jeff Burnz commented

There is other CSS pulling the sidebar into position and setting a width on it, use something like this in your media query:

/* Make sure the main content stretches all the way to the left sidebar */
.two-sidebars .content-inner {
    margin-left: 25%;
}

/* Force the sidebar to wrap and override its width & relative positioning  */
.two-sidebars .region-sidebar-second {
    clear: both;
    left: 0;
    margin-left: 0;
    position: relative;
    width: 100%;
}

I reckon we could add that as a standard layout, actually I always meant to.

leenwebb’s picture

leenwebb commented

Ah of course I'd love to see that as a standard option since it's a pattern I use often in responsive designs. :)

That's *almost* working (much closer than I had gotten!), but sidebar B isn't displaying until after the height of the main content area.

A | Main Content
   |  which keeps going
   |  and going
   |  and going
B |

Where I want them to occupy the same space:

A | Main Content
B |  which keeps going
   |  and going
   |  and going
Chimos’s picture

Chimos commented
Component: Responsive Design » CSS/HTML

I subscribe since I saw the layout options! It is a really common distribution

Jeff Burnz’s picture

Jeff Burnz commented
Version: 7.x-2.1 » 7.x-3.x-dev

This is in 7.x-3.x, not likely to be back-ported.

Chimos’s picture

Chimos commented

Sorry, where should I use this code? I'm new with this great theme.
Thank you

Jeff Burnz’s picture

Jeff Burnz commented

Chimos, if you are using 7.x-3.x then you set this in theme settings, as one of the layouts for tablet displays, otherwise it goes in responsive stylesheet in the correct media query, which one you want to use.

If you are building a custom sub-theme jump strait to using 7.x-3.x-dev, trust me, its a lot better and faster.

Chimos’s picture

Chimos commented

Yes I'm making my own subtheme using AT commerce as a base and 2.2 of AdaptiveTheme.
I'm not very experimented with Drupal, and I don't know exactly the risk of using a dev version. I must have this web in production soon.
Otherwise, now I see there is 7.x-3.0-Beta1 version. So, are this dev and beta versions safe for this purpose?
Thanks alot

Jeff Burnz’s picture

Jeff Burnz commented

OK, I would say play it safe with 7.x-2.x, the dev is very stable and is not going to change much but you never know, its nowhere near as well tested at 7.x-2.x simply due to sheer numbers of users.

Chimos’s picture

Chimos commented

I understand. I will sleep on this decision.

EDIT: I did it.
I had not any problem with the migration, everything fine, and the new version is clearly a forward jump, nice.
Thanks

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Great! Well I think this issue is fixed all round, we have the column drop layouts and Chimos issues are resolved.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.