Adding a Site Wrapper

Create a wrapper around your site to constrain width.

In most cases I do not want my site to stretch beyond 1920px. In order to do this, we need to contain the entire website, which requires the use of GeneratePress Elements, HTML, and CSS.

First, create a new Hook Element, and add the following HTML:

<div class="site-wrapper grid-container grid-parent">

Set the hook to before_header and have it display on the entire site.

Next, create a second Hook Element and add the following HTML:

</div><!-- .site-wrapper -->

Set this hook to after_footer and have it display on the entire site.

At this point you can target the site-wrapper class with CSS to add things like a shadow.

I also typically use the following CSS to constrain the max-width to 1920px:

.site-wrapper {
  width: 100%;
  max-width: 1920px;
} 

Find the official documentation here.

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment