Get All 146 Premium WordPress Themes for Just $59.99

One-Time Payment: Unlimited Use Across Unlimited Domains, Plus Free Lifetime Updates! Learn more

How to Reduce Header Space in Twenty Twenty Theme

2020

Apr

17

Twenty Twenty is currently the default WordPress theme. It has more than 1 million active installations which probably makes it the most popular WordPress theme.

We use that theme in our plugins demo site. Recently, we found out that the header space is too large and we decided to reduce it’s top and bottom space. Here is how it can be done:

1. Login to your Admin Panel
2. Navigate to Left Menu -> Appearance -> Customize -> ‘Additional CSS’ section
3. Insert the following code there and save changes

.singular .entry-header {
	padding:0 0 20px 0;
}

Please Note: we add the above code into customizer Additional CSS section instead of editing it directly in theme style.css, because in this way the custom code will remain on theme upgrade.

5 Comments / WordPress

5 Responses to “How to Reduce Header Space in Twenty Twenty Theme”

1. Thank you so much for this. That extra space was driving me nuts!

2. Hello, this works on pages without a featured image. Any idea on the CSS for those pages?

3. Hi DWY,

   I presume you want to reduce the height of the feature image. It can be done by inserting the following CSS code:

   .singular .featured-media-inner img {
   height: 100px;
   }

   Thanks,
   Tihomir
   Tishonator Team

4. hi its not working

5. With full site editing, the Additional CSS section is not available anymore. I use the Simple Custom CSS and JS plugin instead.