How to Make Twenty Nineteen’s Content Full-Width

If you’ve updated to WordPress 5.0, then you probably noticed the new Twenty Nineteen theme. It very simple, with a huge emphasis on the content and clean typography.

It’s great. However, the content area is really made for articles and blogging.

For wide screens, the content is nudged to the a little bit to the side. This works well for articles, but for creating pages especially with the influx of Gutenberg blocks, the content area should evenly fill the width of the screen.

Twenty Nineteen doesn’t currently have an option to do that. But you can easily do that by adding this line in your Customizer:

body.page .entry .entry-content > *,
.entry .entry-summary > * {
max-width: none;
}

That will only widen pages and should leave your blog posts alone.

Here’s what the pages look like before:

Here’s what it looks like after adding the CSS:

Now if you also wanted to do this for posts, you can use this CSS:

body.single-post .entry .entry-content > * {
max-width: none;
}

Published by Benjamin Intal

Benjamin is an avid WordPress plugin developer, a full-stack developer, owner and lead developer of Gambit, founder of Stackable Blocks, Page Builder Sandwich, and creator of more than 30 WordPress plugins in CodeCanyon. Follow me on Twitter @bfintal

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares