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;
}
16 replies on “How to Make Twenty Nineteen’s Content Full-Width”
Thanks for sharing this helpful information with us.
Thank YOU!! I’m converting my site over an this has been a learning curve. Thanks for the tip!
This didn’t work for me. Only my home page widened after adding the body.page code. Any thoughts?
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.
Interesante.
Hi there, that solved my problem with ugly half-wide screen content of 2019 wordpress theme, thanks alot!
thats really wonderful good article , thank you
good article , thank you
thats really wonderful thank you
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.
you legend
Thank you so much brother. <3
Thank you!
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