Expanding content area of WordPress TwentyFourteen theme

I stumbled upon a post on a blog run by David Lehman (NowhereLAN) the other day that caught my attention. It was regarding changing the page content area in WordPress’ TwentyFourteen theme.

Like David, I used TwentyFourteen as the base for my theme, and have been editing it to suit my needs. One of the things that bothered me was the excessive padding around the content area. As David points out in his post, its not so much a padding issue as it is the max-width set in the css file.

Two things I did differently.

First off, I did not edit the TwentyFourteen theme directly. Instead I am using a child-theme with TwentyFourteen as the template, this is the way that WordPress recommends to prevent overwrites when theme updates happen.

The second thing was the content width on all pages/posts/etc. David’s post only covers changing the page-content class, which will only change the width on actual WordPress pages. Instead, in my child-theme I did the following:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
    max-width: 800px;

Since this was in my child-themes css file,  it will override the max-width on all posts instead of just pages.  I did not have to include the margin entry either since that is already set in TwentyFourteens css file.

5 thoughts on “Expanding content area of WordPress TwentyFourteen theme”

  1. Hello, I think your blog might be having browser compatibility
    issues. When I look at your blog in Firefox, it looks fine but when opening in Internet Explorer, it has some overlapping.
    I just waanted to give you a quick heads up! Other then that, great blog!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.