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

4 replies on “How to Make Twenty Twenty’s Cover Template Content Full-Width”

Hi Benjamin – Right now with Twenty Twenty, my post does not show full page rather, the titles have to be clicked to show the full page. How did you go about showing the full page ? Did you have to download a plug-in ? thank you for helping.

This is the default behavior of the blog page, they only show excerpts of your latest blog posts, which then link you the full article.

I see, meant when categories are clicked from the menu, it still only shows an excerpt of the page (just like on the home page). Found under customize theme options a button for ‘full’ and when I selected this, it shows the full page of the category however, the width somehow reverted to default width instead of the full width setting of that post. Wonder if you’ve noticed this and if yes, what workaround or additional CSS I can place on the post. thank you

one more question Benjamin: automatic excerpts in the home and posts show […] that is not clickable, instead of perhaps a Read More button. Are you able to recommend how to replace […] at the end of an excerpt to a Read More button? thanks again.

Leave a Reply

Your email address will not be published.

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