I love Adaptive Themes for the responsive layout. You rock!
On the desktop, I use the 3 col grail layout, with a left sidebar and a right sidebar. When the screen is 768px/tablet portrait, I would like my left sidebar to just disappear. I can do this easily, if I can keep the 3 col grail format, then just put display:none in my responsive style sheet for sidebar first. The display:none works great.
To select the 3 col grail layout for tablet portrait, I edited three_col_grail.inc to look like this:
'device_groups' => array( // - device_groups, define which device groups this layout can work with, can be one or more of:
'bigscreen', // 'bigscreen', 'tablet_landscape', 'tablet_portrait', 'smartphone_landscape'
'tablet_landscape',
'tablet_portrait',
This works, and allows me to select it as the layout. My problem is, it's not being implemented. I thought perhaps it was the caching issue, so I cleared all caches, immediately re-saved the theme settings, cleared the caches again, but it's still not showing.
When I look at my adaptivetheme_loveland.responsive.layout.css file, it appears to be correct (I think):
/* tablet_portrait three_col_grail */
@media only screen and (min-width:481px) and (max-width:768px) {
.container {width:100%}
#content-column,.content-column,div.sidebar {float: left; clear: none}
.two-sidebars .content-inner {margin-left: 10px; margin-right: 230px}
.sidebar-first .content-inner {margin-left: 10px; margin-right: 0}
.sidebar-second .content-inner {margin-right: 230px; margin-left: 0}
.region-sidebar-first {width: 10px; margin-left: -100%}
.region-sidebar-second {width: 230px; margin-left: -230px}
.at-panel .region {display:inline;float:left}.three-3x33 > .region,.three-50-25-25 > .region-three-50-25-25-second,.three-50-25-25 .region-three-50-25-25-third,.two-50 > .region,.two-brick > .panel-row > .region,.four-4x25 > .panel-row > .region,.five-5x20 > .panel-row > div.region {width:50%}.three-3x33 > div.region-three-33-first,.three-25-25-50 > .region-three-25-25-50-first,.three-50-25-25 > .region-three-50-25-25-first,.three-25-50-25 > .region-three-25-50-25-first,.six-6x16 > .panel-row,.four-4x25 > .panel-row,.three-inset-right > .inset-wrapper > .region,.three-inset-left > .inset-wrapper > .region,.five-5x20 > div.panel-row,.five-5x20 > div.panel-row > div.region-five-fifth {float:none;display:block;width:100%;clear:both}.three-25-25-50 > div.region-three-25-25-50-second,.three-25-50-25 > div.region-three-25-50-25-third,.three-inset-right > .region-three-inset-right-sidebar {width:25%}.three-25-25-50 > div.region-three-25-25-50-third,.three-25-50-25 > div.region-three-25-50-25-second {width:75%}.six-6x16 > .panel-row > .region {width:50%;float:left}.two-66-33 > .region-two-66-33-first,.two-33-66 > .region-two-33-66-second {width:66.666666%}.two-66-33 > .region-two-66-33-second,.two-33-66 > .region-two-33-66-first {width:33.333333%}.two-brick > .panel-row {float:none}.three-inset-right > .inset-wrapper {width:75%;float:left}.three-inset-left > .region-three-inset-left-sidebar {width:25%;float:right}.three-inset-left > .inset-wrapper {width:75%;float:right}
}
But the second sidebar is still showing wrapped under the main content, not in the right sidebar where it should be. Is there another step I'm missing?
Comments
Comment #1
cindyr CreditAttribution: cindyr commentedFWIW, I gave up on the 3 col grail, as I just couldn't get that to be recognized, although looking back on it I'm guessing that had to do with my sidebars css styling. Instead I switched to the 2 sidebars right stacked. Then I edited the two_sidebars_right_stack.inc function to look like this (note the hardcoding in there for my column widths):
Then I heavily edited the CSS file for responsive.tablet.portrait.css to make it work, primarily in sidebar region margins.