• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Modify Site Inner, Wrap, Content & Sidebar Width Layout in Genesis

Using the Genesis Sample child theme for example, we’ll change the width of the content area and sidebar as well as the site inner and wrap classes.

This tutorial is based on a question from a member of WP Sites.

Under the Structure and Layout section of the Genesis Sample themes style.css file, you’ll find the CSS rules which need modifying.

Note: The solution in this post requires you to modify the default CSS rather than add the CSS to your child themes style sheet. CSS may need tweaking for use on other themes.

Firstly. here’s the default layout of content sidebar:

default-layout

And here’s the CSS for the default widths:

.site-inner,
.wrap {
    margin: 0 auto;
    max-width: 1200px;
}

.content {
    float: right;
    width: 800px;
}

.sidebar-primary {
    float: right;
    width: 360px;
}

Smaller Content – Bigger Sidebar

Lets start with making the content area smaller and the primary sidebar larger, keeping the width of site inner and wrap to the defaults.

smaller-content-larger-sidebar

You only need to change the value’s for the .content and .sidebar-primary classes to what you see in the following CSS rules:

.content {
    float: right;
    width: 600px;
}

.sidebar-primary {
    float: right;
    width: 560px;
}

This increases the value for the .primary-sidebar width by the same amount as you decrease the width for the .content class.

Default Wrap – Smaller Content & Smaller Sidebar

Next we’ll decrease the content sidebar width using a smaller value for the .content class and smaller value for the .primary-sidebar class.

default-wrap-small-site-inner

.site-inner {
    margin: 0 auto;
    max-width: 840px;
}

.wrap {
    margin: 0 auto;
    max-width: 1200px;
}

The above CSS reduces the width for the .site-inner class by 360px so we’ll need to reduce the width for the .content and .primary-sidebar classes by the same amount:

.content {
    float: right;
    width: 600px;
}

.sidebar-primary {
    float: right;
    width: 200px;
}

The above CSS shows you the width for the .content class has reduced from 800px to 600px and the width for the .sidebar-primary class has reduced from 360px to 200px.

Smaller Site Inner & Wrap

This last solution enables you to create a smaller content area, smaller primary sidebar and also reduce the width of the .site-inner and .wrap classes like you see in the following screen shot.

modify-site-inner-wrap

.site-inner,
.wrap {
    margin: 0 auto;
    max-width: 840px;
}

.content {
    float: right;
    width: 600px;
}

.sidebar-primary {
    float: right;
    width: 200px;
}

Related Tutorials

  • Change Sidebar Width in New Genesis Child Themes
  • Modify Width of Content & Sidebar on WooCommerce Shop Page

Reader Interactions

Comments

  1. Stephanie says

    May 21, 2018 at 5:20 pm

    Can you please give the code for how to increase the content width with no sidebar. There is no side bar on any page and I wish my content to show wider on post pages as well as the home page.

    Thank you so much.

    Log in to Reply
    • Brad Dalton says

      May 22, 2018 at 7:29 am

      Stephanie. I don’t accept custom code requests from non members.

      Log in to Reply
  2. Aldo says

    April 1, 2018 at 11:34 am

    I am using Genesis child theme and now in struggle to remove space between post and sidebar. If you know how to do it please tell me. Thank you very much.

    Log in to Reply
    • Khan says

      May 20, 2018 at 10:56 am

      Find the following CSS:

      1:
      .site-inner,
      .wrap {
      	float: none;
      	margin: 0 auto;
      	max-width: 1200px;
      }
      2:
      .content {
      	float: right;
      	width: 700px;
      }
      3:
      .sidebar-primary {
      	float: right;
      	width: 360px;
      }
      Now change the Width to %:
      foe example:
      1:
      .site-inner,
      .wrap {
      	float: none;
      	margin: 0 auto;
      	max-width: 85%;
      }
      2:
      .content {
      	float: right;
      	width: 75%;
      }
      3:
      .sidebar-primary {
      	float: right;
      	width: 22%;
      }
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.