Categories
Uncategorized

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;
}

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.

Connect with me on Twitter @bfintal

16 replies on “How to Make Twenty Nineteen’s Content Full-Width”

THANK YOU so much! I’m new to Gutenberg and decided to just use twenty nineteen on a brand new client site. I’m generally pleased, and learning quickly, but your code has really helped me.

Hi Benjamin and thanks for your piece of code! I’ve improved it and put all in one by the way. Here it is:

/* whole website */
.entry .entry-content > *, .entry .entry-summary > * { max-width: none; }
/* only posts */
body.single-post .entry .entry-content > *, .entry .entry-summary > * { max-width: none; }
/* only pages */
body.single-post .entry .entry-content > *, .entry .entry-summary > * { max-width: none; }
/* for comments too */
.comments-area { max-width: none; }
/* full width for everything – no need of previous lines in such a case*/
.entry .entry-content > *, .entry .entry-summary > *, .comments-area { max-width: none; }

Finally I created a child theme with your tweaks (improved) and many others. You can find it here: https://i2019.wp-xp.xyz

Have a nice day and thanks again for this post, and for your blog more generally.

This works only for the content section. The primary site menu is still left aligned and does not center with the content. Any fix for getting the menu to also go full width?

This works, but images that were centered will still show up where they did before–not in the new center. Is there an easy fix for this? Thanks.

this works great. However, images do not get the wider area. Is there a way to make images wider as well. I use the classic editor in Twenty-Ninteen. I am not wedded to the theme if there is a more flexible one out there

Leave a Reply

Your email address will not be published.

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