When using GeneratePress, I almost always create a Layout Element to make my pages and posts full width — since I’m typically building those out using GenerateBlocks.
However, when you do that, you might have noticed, is that the back-end editor also spans the full width, like this;
This makes your posts hard to read, and can also obscure flyout and popup menus that are too close to the edge.
I’ve come up with a little bit of CSS to contain the post editor width — and it’s pretty simple!
/* Post Editor Width */
.post-type-post .block-editor-block-list__layout {
max-width: 728px;
margin-inline: auto;
}
.post-type-post .edit-post-visual-editor__post-title-wrapper .editor-post-title {
max-width: 728px;
margin-inline: auto;
}I have it maxed out at 728px wide, which is typically around the size my posts will actually display on the front end, which is helpful since the back and front ends will be more consistent.
Here’s what it looks like with the 728px container:
That is much better 😅
Of course, you can just change those max-width values to whatever floats your boat.
Note: this only affects posts and not pages. Typically I’m controlling posts with some kind of template, but pages I need to be able to see full width in the back end.
But, there’s a catch!
I haven’t exhausted all possibilities, but the CSS you put in the customizer will not be rendered in the back end — so don’t even bother dropping this in there.
You can put it in your child theme, but you’ll need to enqueue your child theme CSS file into the backend editor (which I’ve made a post about).
What I ended up doing ended up being the simplest and most reliable solution — assuming you’re using Code Snippets Pro.
The benefit of dropping this in Code Snippets Pro is that there is a radio button that lets you choose to only use this snippet in the administration area — which is exactly what we want.
