The Inspector

The following is an extract from the post How to Resize the Width of the Twenty Twenty Theme Using CSS only and 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.

Cool, huh?