Need A Full Width Wrapper [#2121267]

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.

Thanks,

Comment	File	Size	Author
#2	problem_solved_maybe.png	58.68 KB	mdm172
#2	problem.png	48.78 KB	mdm172

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #2

mdm172 CreditAttribution: mdm172 commented 27 October 2013 at 01:50

File	Size
problem.png	48.78 KB
problem_solved_maybe.png	58.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>
		</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>--HERE----></div><-------
		<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.
 */
#page,
.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.

Comment #3

lilbebel CreditAttribution: lilbebel commented 23 September 2014 at 20:35

Issue summary:

View changes

Hello,

This works BUT all my footer content gets moved out of the grid as the footers are no longer in the grid. So, I get the screen wide wrapper but my content is no longer contained.

How did you get yours contained?

Comment #4

lilbebel CreditAttribution: lilbebel commented 24 September 2014 at 17:48

Hello,

My solution was to add this to my .scss file:

#unique-id-of-my-block-item {
max-width: 1200px;
margin: 0 auto;
}

I will have to do this for every item and I'm not sure it's an elegant solution but I can't get anything else to work.

Comment #5

mike stewart CreditAttribution: mike stewart commented 25 September 2014 at 04:45

Status:

Active

» Fixed

hmm, I'm afraid you may be overthinking it, as zen does this by default -- but with a built-in exception for large monitors (as you seem to have noticed) -- which is a best practice in order to help with readability. I think if you open: sass/layouts/_responsive.scss and comment out the max-width limitation as I have below, you'll achieve what you're after. You might want to test on a new clean/vanilla subtheme.

/**
 * Center the page.
 *
 * For screen sizes larger than 1200px, prevent excessively long lines of text
 * by setting a max-width.
 */
#page,
.region-bottom {
  margin-left: auto;
  margin-right: auto;
  // Remove the max-width, to allow all screen sizes to be full-width
  // max-width: 1200px;
}

marking as fixed. please feel free to re-open if this doesn't address your issue.