How to Resize the Width of the Twenty Twenty Theme With CSS

One of the things bloggers look forward to do with the Twenty Twenty theme is to resize its width, to expand the content area, which in the “Default template” has a max-width of 580px, and I guess we can all agree that it’s too thin.

In this post, I’m gonna do the following:

• show you how you can find the selector you need with “the inspector” (the Developer Tools)
• make you reflect on the need to find more selectors than the one for “the content”
• give you a list to expand that width properly.

Let’s get this party started! Shall we?

The Twenty Twenty Theme Width

The Twenty Twenty Theme has three templates: a Default Template (with a width of 580px) a “Full Width Template” and a “Cover Template”. We’re going to focus on the “Default Template” for the following example.

For what I’ve seen, most online magazines, use a width for its content of 680px to 760px; in the following screenshots, you can see the content at 580px and then at 700px (giving you space for nine (9) more characters)

Now, how do we find the selector we need and what do we need to bear in mind?

Finding The Selector: The Developer Tools and the Style Sheet

My guess is that if you arrived to this post, is because you don’t know that there are two great tools (free ones!) you can use to find selectors, their properties and values.

One of them, is the Developer Tools, which you can simply activate in your browser; it lets us see all we need to know about an element.

For instance: You head over to the page where the element you want to modify is; right click on it to open the Developer Tools and many tabs will open; select the “Elements Tab” and there you’ll find what you were looking for 😉

In the screenshot below, we can see very important things, from top to bottom:

1. the .entry-content p element is selected, and its inside a blue box with orange on its sides; on the upper left, you can see the width and height of that p element (580×120)
2. Under the “elements tab” we see:
   1. on the first column, p is highlighted in grey
   2. on the second column, two things: the selector and the style sheet’s line (3590) where you can find this declaration.
   3. on the third column, the Box Model

And that’s how you get to the second tool that you are to master when customizing a theme: its style sheet. Many – if not most – of the selectors you need, are there. So, humble advice? Download the theme, and read the style sheet; you might be surprised of what you’ll find.

What We Are To Bear in Mind

The selector that’s highlighted in the example…

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {}

… refers to all direct children of .entry-content, that do not have an alignment, which happens when you set a block to right, left, full width, etc.

This very important, because if you were to use, for instance:

• .entry-content p, you’d be modifying only the paragraphs
• .entry-content > *, all the direct children of .entry-content, blocking you the possibility to expand blocks in the editor (I mean, you can expand them, but you won’t see the result on the front end)

Conclusion: We Need More Selectors

When a post is displayed, there are more elements than the blocks we’ve added to the content through the editor; such us, the author-bio, the comments, the navigation links, etc.

To take care of all of it, the Twenty Twenty theme has declared (in its style sheet) a same value of 58rem for the width of them and… you need to find them all.

Good news are: I’ve done the job for you.

Resizing the Twenty Twenty’s Width With CSS

Here are all the selectors you need to change the width of the Twenty Twenty Theme. I left comments before every element, so can check with the original style sheet their context.

/* -------------------------------------------------------------------------- */
/* 4. Layout (Version 2.0)
/* -------------------------------------------------------------------------- */

/* Resize Default Width */
/* 1007 */.section-inner.thin,
/* 2472 */.post-meta-wrapper,
/* 2613 */.post-nav-links,
/* 2642 */.author-bio,
/* 2921 and 2922 for Group and Cover Blocks */ 
[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright),
[class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) ,
/* 3594 and 3599 for entry-content's children */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
/* 3695 and 3696 in Entry Media */
.alignfull > figcaption,
.alignfull > .wp-caption-text,
/* 3954 */.comment-respond p:not(.comment-notes) {
	max-width: 70rem;/* change this value */
}