Categories
WordPress

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:

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

Leave a Reply

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.