How to make full width page content wider in Genesis for WordPress

If you just started using Genesis framework for WordPress you probably noticed that full width content in Genesis sample theme takes no more than two thirds of the screen width.

That’s great if you use your website for single column articles. But in some cases you may need to have wider or multiculumn layout, and that narrow width might become not ideal. Here you’ll find a few lines of CSS code which will let you change full page width in seconds.

How to make full width page content wider in Genesis Sample theme

By default Genesis Sample theme content uses 65% of the whole website width if you view it on desktop screen.

These lines are in the theme’s style.css are responsible for this behaviour:

@media only screen and (min-width: 960px) {
   .content {
       float: left;
       width: 65%;
   }
}

If you want to make the full width page content wider you need to change that width: 65%; setting to a bigger number.

How to make Genesis page content wider using Customizer

Go to Appearance >> Customize, and add the updated lines to Additional CSS tab:

The width change is simple and straightforward:

@media only screen and (min-width: 960px) {
   .content {
       float: left;
       width: 95%;
   }
}

You’ll see the results of larger page content width immiadiatelly. Just click Publish, and the changes will be saved and visible to the website visitors.

How to make Genesis full width page content wider in Genesis Sample theme’s style.css file

The same changes can be done directly in the Genesis Sample based themes. Here’s whay you need to do:

Go to Appearance >> Theme Editor. It will automatically open style.css file for editing.

Look for the .content setting with 65% width. Change it to a larger number (up to 100%).

There’s one more thing you should do before saving changes. Genesis css file has a version number at the top of the file. After making changes in the file you should also change the version number to any bigger number.

It will make sure your (and previously visited visitors) web browser will apply the latest changes and will show the website with all the latest styling updates.