I'm an old school designer just now embracing SASS. Learning all this is a lot of fun with ZEN. But, I'm having a few problems "wrapping" my head around a few things.

I can't find any documentation on making the responsive version extend full width. I would like to have the page wrapper start at 100% of available screen area rather than 100% of the zen-grid on the larger screen sizes.
I hope I'm making sense.

Easily accomplished using my old methods but not so intuitive with ZEN-GRIDS and SASS.


#2 problem_solved_maybe.png58.68 KBmdm172
#2 problem.png48.78 KBmdm172


new48.78 KB
new58.68 KB

OK I think I solved my issue,

What I've done is created a page wrapper in page.tpl.php like this:

<div id="page-wrapper">
<div id="topbar-wrapper">
<div class="topbar">Testing The Top Bar <?php print render($page['topbar']); ?> </div>

I then moved the page div just above the main div.

<div id="page">
<div id="main">
<div id="content" class="column" role="main"> <?php print render($page['highlighted']); ?> <?php print $breadcrumb; ?> <a id="main-content"></a> <?php print render($title_prefix); ?>

This took care of making my topbar and header regions full width.

For the footer to become full width, I closed the page div just after the second side bar here:

<?php if ($sidebar_first || $sidebar_second): ?>
<aside class="sidebars"> <?php print $sidebar_first; ?> <?php print $sidebar_second; ?> </aside>
<?php endif; ?>
<div id="footer-wrapper">
<footer><?php print render($page['footer_first']); ?>
<?php print render($page['footer_second']); ?>
<?php print render($page['footer_third']); ?>
<?php print render($page['footer_fourth']); ?>
<?php print render($page['footer_bottom']); ?> </footer></div>----HERE-----></div><-----------
<?php print render($page['bottom']); ?>

This left the footer area out of the grid but still within the page wrapper. I then closed the page wrapper after the footer wrapper.

Now, for the sass/css.
All of this was done in layouts/responsive.scss.

/* Modified to include a page wrapper to allow the topbar, header,
* and footer to become full width
/* We're setting the page wrapper at 100% of viewable area
* and centering it.
#page-wrapper {
  margin: 0 auto;
  width: 100%;
/* End of modification
* Center the page.
* For screen sizes larger than 1200px, prevent excessively long lines of text
* by setting a max-width.
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;

This being my first crack at Zen-grids, sass etc, I only knew how to solve this the way I did. If anyone can see a problem with my method, I would greatly appreciate a heads up.

I've attached before and after screenshots of the problem.