WordPress 2014 Theme Full Width

I recently decided to upgrade my theme from WordPress’ 2011 Theme to the new 2014 one. I think the typography of the 2014 one is absolutely beautiful. The problem I had with the built-in theme though is that it restricts the content to a 474px width, which might be fine for text-only posts, but when you have a lot of images and in particular source code snippets then it’s simply too squishy.

What I ended up doing to fix the problem was installing the Simple Custom CSS plugin and then adding the following CSS:

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content,
.post-navigation,
.image-navigation,
.comments-area {
	max-width: 900px!important;
}

.site-header,
.site {
    max-width: none!important;
}

6 Replies to “WordPress 2014 Theme Full Width”

  1. Hi

    Thanks for your info on this. I have done the above but nothing changed? Sorry I am a newbie but i have re checked several times. would you have any ideas?

    Many Thanks
    Adrian

    1. Hi Adrian,

      Can you see the Simple Custom CSS include in your HTML source?

      If you look at the source of my blog for instance you will see <link rel='stylesheet' id='sccss_style-css' href='http://robdmoore.id.au/?sccss=1&ver=3.8.1' type='text/css' media='all' />

  2. Thank you Robert for sharing this info on this wonderful plugin. I was able to extend my gallery with the full width page.

    But by doing this, the page covered my background image on the right hand side. This is necessary for meas it coincides with my header. So I have undone the CSS now and gone back to the original.

    Is there anyway I can have the full width page that allows me to still show my background image.?

    Thanks for your help,
    Navin

    1. Hi Navin,

      In order to let the background show through you need to change the background colour of the div that has a white background to transparent.

      In your case that means adding a style like:

      
          .site {
              background-colour: transparent;
          }
      

      Note: that means that the background will show up more than it does currently so might look weird, but certainly worth a go 🙂

  3. Hi Robert,
    I added the CSS but unfortunately the background completely disappears. I have changed it back to the original. You can see my background image on the right hand side. Its visible now.

    Regards,
    Navin

Leave a Reply

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