Add Full Width Wrap to the Inner Content of a Page in Genesis Theme

February 6, 2014 -

By default the inner content of a Genesis page is contained within a div with a fixed with of between 1140px -1200px and centered.

genesis-inner-site-wrap

What if you need to add a full width design element that goes edge to edge of the viewport, like a gradient drop-shadow like so…

 

genesis-inner-site-wrap-gradient

Subtle Gradient at top of white area

There is a full wrap mark-up not enabled by default… trip to functions.php

Enabling the Inner Content Wrap

Add this you your functions.php file

add_theme_support( 'genesis-structural-wraps', array('header','nav','subnav','site-inner','footer-widgets','footer') );

This will re-order the mark up adding a .wrap div inside the .site-inner div

Most of these already exist, what we are adding is site-inner to the array.

genesis-inner-site-wrap-content-div

However the layout is still the same – this is because both the .site-inner and .wrap div share the same CSS rule of a max-width:1140px

Changing the CSS

Add these rules at the end of your CSS style sheet (or edit the originals):

.entry {
background-color:transparent;
}

.site-inner {
max-width: none;
}

@media only screen and (max-width: 1139px) {
.site-inner{max-width: none;}

}

The first rule makes the actual content area background transparent so it can be set in the site-inner instead, the second 2 rules set the width to none, one in the core css and one in the media queries.

Applying New CSS

Add a rule for your new background for the site-inner div

.site-inner {
background: linear-gradient(to bottom, rgba(0,0,0,0.20) 0%,rgba(0,0,0,0) 8%);
}

 

And there you have it

genesis-inner-site-gradient-background

Gradient Background Applied to Inner Content

Dev Site

(The final site design has changed – however the gradient applied to the element is still in use)

Related Posts:

Categorized CSS, WordPress Tagged

6 Comments

  1. Jeff on November 2, 2016 at 11:45 pm

    Hi Neil, related question. On mobile devices I would like the content portion of the page (div class post) go edge to edge on the screen rather than having a thin slice of the background on each side. Is this easily accomplished?

    Reply
    • Neil Gowran on November 3, 2016 at 12:17 am

      Hi Jeff, yes it certainly is possible, you’ll need to track down which element is controlling the padding at that size, for me its normally the .wrap element, so you’ll need to add a media query CSS class at a certain size to set the padding to 0 – truth though having it edge to edge I find is too much especially where text is involved, my eye wants to see a bit of breathing space around the text.

      Reply
  2. M_Msood on July 26, 2016 at 4:47 pm

    Hi!

    How to exclude the homepage from displaying the wrap?

    thanks!

    Reply
    • Neil Gowran on July 27, 2016 at 6:44 am

      You can target it specifically using the .home class

      Reply
  3. Miguel on June 17, 2015 at 4:24 pm

    Hi Neil, very useful tutorial!
    Do you know a way to add just one additional value to the already declared structural-wraps array?
    Imagine that you are trying to add another structural-wrap value through a plugin.
    Thanks!

    Reply

Leave all Comment