How to make WordPress Twenty Fourteen theme full width

This year WordPress provided us with an awesome looking Twenty Fourteen theme with a responsive design, however the theme width is set to 1260px and for those of us who use high resolution monitors it looks like:

So there is a lot of unused space and I like my themes to be full-width 🙂

Here is what I did to make the Twenty Fourteen theme full-width. Of course, this may not be the perfect way or the easiest, but it does the job.

1/ Locate the theme style.css (which is in yourwp-content/themes/twentyfourteen folder) file and look for the following code:

.site {

background-color: #fff;
max-width: 1260px;
position: relative;
}

and modify the max width to 100% instead 1260px.

2/ Find the following piece of code:

.site-header {

background-color: #000;
max-width: 1260px;
position: relative;
width: 100%;
z-index: 4;
}

and again modify the max-width to 100% instead 1260px.

Now it should like this, which I find a lot better.

However, your posts, pages etc. content is shrunk to 474px and I personally like to add a bit more width to it and if you too wish to make it a bit wider, locate the following code:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 474px;
}

Change the max width from 474px to 80%.

You will notice that the comment box will stay in the middle which is quite good and if you like it, okay, but if you wish to make it wider, look for the following code:

.comments-area {

margin: 48px auto;
max-width: 474px;
padding: 0 10px;
}

and change the max-width from 474px to 80%. Also locate the following code:

.site-content .entry-meta {
background-color: #fff;
margin-bottom: 8px;
}

and replace it with:

.site-content .entry-meta {
background-color: #fff;
margin-bottom: 8px;
max-width:100%;
}

Now your WordPress should look like this and hopefully this is the full-width you are looking for 🙂

I personally like the sidebar buttons to be a bit more flashy when we hover them and if you guys like it too, you can try this styling. Locate the following code in your style.css:

.widget a {

color: #fff;

}

.widget a:hover {

color: #41a62a;

}

and replace it with:

.widget a {

 color: #fff;

 display:block;

 }

 

.widget a:hover {

 display:block;

 background-color: #41a62a;

 text-align: center;

 }

Now when you hover a button on the sidebar, it will be in a green box instead of just turning its title green.