How to Make Twenty Twenty’s Cover Template Content Full-Width

WordPress 5.3 shipped with a new default theme named Twenty Twenty.

It’s clean, and looks amazing especially with content created with the Block Editor.

There’s a full-width template as well that worked fine, unlike in Twenty Nineteen before when the content leaned over to one side of the screen and we needed to use workarounds in order to make the content full-width.

I especially like the new Cover Template that puts the title in the center against a tinted featured image.

The Cover Template has one caveat though. When you use it, your content can no longer go full-width – just like how the Default Template does things.

You can easily fix this by adding the following lines in your Customizer:

body.template-cover .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
body.template-cover [class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
    max-width: 120rem;
}
@media (min-width: 700px) {
    body.template-cover .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
        width: calc(100% - 8rem);
    }
}

This will widen the Cover Template’s content width to be the same as the Full Width Template.

Here’s what the page looks like before:

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