Making WordPress posts wider – Feb 2016
A note, if you do not know what .css files are, or you do not know how to edit, or how to save backups locally somewhere in case you make a mistake then I would recommend you read up on google before you do anything.
Dashboard Appearance Editor
From the Templates on the right, find style.css and once its loaded I moved the entire contents into an editor like notepad++.
Search for widths and you find the items below. I have annotated the original values with /* jgibbons edited from … */
Once you have edited these you click on Update File.
.site {
background-color: #fff;
max-width: 10000px; /* jgibbons edited from 1260px; */
position: relative;
}
.site-header {
background-color: #000;
max-width: 10000px; /* jgibbons edited from 1260px; */
position: relative;
width: 100%;
z-index: 4;
}
Then I looked for any values of 474px and replaced them with 800px, for example.
.page-content {
margin: 0 auto;
max-width: 800px; /* jgibbons edited from 474px; */
}
.page-header {
margin: 24px auto;
max-width: 800px; /* jgibbons edited from 474px; */
}
Finally, there is another file you need to change which is the mce editor used for posts. It is called editor-style.css and is found under your wp-content/themes/themename/css/editor-style.css Sadly you cannot edit this without access to the wordpress file system.
For instance, mine was under C:\path-to-where-I-downloaded-it\wp-content\themes\twentyfourteen\css
Edit editor-style.css
html .mceContentBody {
font-size: 100%;
max-width: 800px; /* jgibbons edited from 474px; */
}
Then ftp it back up. I’d expect that they would have to get their server side caches refreshed before this takes effect.