Change Sidebar Width in New Genesis Child Themes

This free tutorial helps you work out how to change the width of the content area and sidebar in any Genesis child theme like this :

By default, most new genesis child themes use a percentage to set the width of the .content and .sidebar-primary elements.

Using the Infinity Pro theme for example, the default CSS is as follows :

Located between lines 658 – 662 in the Infinity Pro child themes style.css file you’ll find the following CSS rule which sets the default width of the content area.

.content {
    float: right;
    padding: 80px 60px;
    width: 65%;
}

Located between lines 690 – 693 in the Infinity Pro child themes style.css file you’ll find the following CSS rule which sets the default width of the primary sidebar.

.sidebar-primary {
    float: right;
    width: 35%;
}

You can find the CSS rules which style your website by inspecting the element using your browser like this example :

CSS Changes #

Now that you know where to find the CSS rules you can then copy these rules to the end of the Infinity Pro themes style.css file ( before the media queries between lines 1846 – 1852 ) and modify the value for the width property for each rule like these examples :

.sidebar-primary {
    width: 25%;
}

.content {
    width: 75%;
}

And here’s the custom CSS rules added in a fresh install of the Infinity Pro child theme by StudioPress :

In this case, the sidebar width has been changed to 25% and the content width has been changed to 75% so the total width of the content sidebar equals 100%.

Don’t forget to clear caching!

Demo Video #

Shows how to change the width of the primary sidebar and content area in Genesis child themes.

Tested using the Infinity Pro child theme by StudioPress however should work fine in any new Genesis child theme which uses percentage widths for the content area and sidebars.