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?

http://www.VisitLoveland.Org

Comments

cindyr’s picture

Assigned: Unassigned » cindyr
Status: Active » Closed (won't fix)

FWIW, 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):

function two_sidebars_right_stack_layout($sidebar_first, $sidebar_second, $sidebar_unit) {

  $left = 'left';
  $right = 'right';

  $sidebar_second = $sidebar_first . $sidebar_unit;
  $sidebar_first = '0px';
  $push_right    = $sidebar_second;

  $styles = <<<EOF
#content-column,.content-column {float: left; clear: none}
.two-sidebars .content-inner,.sidebar-second .content-inner {margin-$left: 0; margin-$right: $push_right}
.sidebar-first .content-inner {margin-right: 0; margin-left: 0}
.region-sidebar-second {width: 230px; margin-left: -230px; float: left; clear: none}
.region-sidebar-first {display: none; width: 0; margin-left: 0; margin-right: 0; margin-top: 20px; clear: both; overflow: hidden}
.region-sidebar-first .block {float: left; clear: none}
EOF;

  return $styles;
}

Then I heavily edited the CSS file for responsive.tablet.portrait.css to make it work, primarily in sidebar region margins.