Twenty Fourteen Theme Full Page Width

Twenty Fourteen is the latest theme that Patnotebook is using. It is a nice theme (and responsive too !).

But strangely, for a modern theme, it does not seemed to use up all the space in a wide screen.

Example:

I could install a CSS editor plug in to WordPress or I can use the one that comes with WordPress Jetpack.

Either way, I made these code changes:

.site,
.site-header {
max-width: 100%;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta, .page-content {
/* Original max-width: 474px */
max-width: 80%;
}

But funnily, the featured image on the top of each blog post looks ugly.

I researched and found this is probably an issue with the default image size and the Twenty Fourteen theme. Whatever 🙂
So I added these lines:

.hentry {
max-width: 80%;
}

.post-thumbnail img {
height: auto;
min-width: 100%;
}

The final code is this:

Much better patnotebook now. A full page width blog now. There is a little impact on the iPad version though.. the pre-CSS changes looked much better on iPad than now.
But never mind… cannot win all..

Move on…

photo credit: CodeIgniter Code I via photopin (license)