Categories
Coding

How to Resize the Width of the Twenty Twenty Theme Using CSS only and the Inspector

Continuing with a tutorial on how to customize the Twenty Twenty Theme, learn how to resize the width; plus, introducing to the inspector.

You’re not at the wrong tutorial. We’re still customizing the Twenty Twenty Theme with CSS only; but, I figured that if you find this helpful, it’s because you probably don’t know what the inspector is and how useful it is.

Let’s get this party started! Shall we?

The Twenty Twenty Theme Width

The Twenty Twenty Theme, has by default – in the “Default Template” – a width of 580px; I believe it to be too thin for a blog, so I expanded it to 700px, which is the approximate size you’ll see on online magazines.

Here are two screenshots that show how the theme looks by default, and with an expanded width:

To fully appreciate the difference, you can compare the demo of the theme with this blog, or you can use: the inspector!

The Inspector

The inspector is a tool you can find in any browser, which lets you see the HTML and CSS code of a page; any page. All the secrets exposed!

  • in Safari, you should see in your browser’s menu bar a tag named “Develop”; if you don’t – as the Safari User Guide states – choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.” Then, to access the inspector: a) right click, and then click “Inspect element”, or b) press “CMD + alt + i.”
  • in Google Chrome, simply right click wherever you want on any page, and then click on “Inspect”, as the Tools for Web Developers says.

The inspector let’s you see the code and edit it, but only to try how things can look like, because if you want to modify your CSS or HTML code… well, by now you know what it takes; when you use the inspector, changes will be gone after you refresh the page.

For instance, here’s what the inspector shows in a post using the Twenty Twenty Theme:

You can see three things here:

  1. the .entry-content p element is selected (with one click)
  2. the width of the paragraph is 580px;
  3. the width comes from the style sheet’s line nº 3351 and the size is actually determined by “max-width: 58rem;

Just by clicking on 58rem, and writing instead 70rem, we get a preview of how a 700px width looks.

Now, besides the fact that if you do this, the change will disappear after you refresh the page, entry-content p is not the only element you’ll need to resize to change the width of your entire blog. So, let’s get onto the selectors!

Resizing 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 stylesheet their context.

/* -------------------------------------------------------------------------- */

/*	4. Layout
/* -------------------------------------------------------------------------- */

/* Resize Default Width */
/*line 1003*/.section-inner.thin,
/*line 2466*/.post-meta-wrapper,
/*line 2634*/.author-bio,
/*line 2909 and 2910*/ [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) ,
/*line 3551*/.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
/*line 3556*/[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide),
/*line 3652 and 3653*/.alignfull > figcaption,
.alignfull > .wp-caption-text,
/*line 3991*/.comment-respond p:not(.comment-notes){
	max-width: 70rem;
}

And that’s it! I believe 700px is a nice choice, considering specially that the theme comes with a full width template, but it’s up to you!

Up Next: How to create a Child Theme for the Twenty Theme. Check out what I’ve done so far 👩🏻‍💻

If you’re following this blog only on WordPress, you’re gonna miss a lot of goodies! Subscribe to this tutorial to get a cheat sheet, updates, free stuff and so we can keep in touch! I’d like to see how you’re shinning with your blog 😉

By Laly

B.Ed, Lawyer, Writer. I write, I code, and I take pictures. My identity is unknown, I have #ADHD superpowers and I'm from Jupiter. Also, I blog about the boys in the band 🎧 at nkotbtheblog.com.

Follow Laly on WordPress.com

Any thoughts?