Back to Community
Home / Community / Theme → Twenty twenty

How to Reduce Header and Content Spacing in the Twenty Twenty Theme

32 threads Sep 16, 2025 Theme → Twenty twenty

Content

A common challenge for users of the Twenty Twenty theme is managing the default spacing, particularly the large gaps below the site header and above page content. This extensive white space, while a design feature, often pushes valuable content down the page. Based on community discussions, this guide outlines the most effective methods to control this spacing using custom CSS.

Why Does This Spacing Happen?

The Twenty Twenty theme is designed with a focus on readability and a spacious, modern aesthetic. This is achieved through default CSS properties like padding and margin on key elements such as the header, cover block, and post content containers. While this looks great on some sites, many users find they need a more compact layout.

Common Solutions to Reduce Spacing

1. Reducing the Main Site Header Padding

To shrink the white space inside your main header area, target the .header-inner class. The default padding is quite large, so reducing it can have a significant impact.

.header-inner {
    padding: 1rem 0; /* Adjust this value as needed */
}

2. Adjusting the Cover Template Height

Many users want to reduce the full-screen height of the Cover Template. The following CSS changes the container height and repositions the inner content to keep it visible.

.cover-header {
    max-height: 70vh !important; /* Adjust the viewport height percentage */
}
.cover-header-inner {
    padding: 0 0 40vh 0 !important; /* Adjust to match the new height */
}

3. Removing Space Below the Header on Standard Pages

If you have a large gap between your header and the start of your page's content, the issue is often the padding on the .post-inner element. This is especially common on homepages where the title has been hidden.

.post-inner {
    padding-top: 0 !important;
}

Note: To target only the homepage, you can use a more specific selector like .home .post-inner.

4. Fine-Tuning Block and Heading Margins

To adjust the space after a specific heading (e.g., an H5) or other block, you can target its bottom margin directly.

.entry-content h5 {
    margin-bottom: 5px; /* Adjust this value */
}

How to Add This CSS

  1. Navigate to your WordPress Dashboard.
  2. Go to Appearance > Customize.
  3. Click on Additional CSS.
  4. Paste your chosen CSS code into the text box.
  5. Click Publish to save your changes.

Important Considerations

  • Use !important Sparingly: The !important rule is sometimes necessary to override strong default styles, but it can make future CSS changes difficult. Use it only if your changes don't apply without it.
  • Test on Mobile: Always check how your spacing changes look on mobile devices. You may need to add mobile-specific CSS using @media queries to ensure a good responsive experience.
  • Consider a Child Theme: For more extensive modifications, creating a child theme is the recommended best practice. This protects your changes from being overwritten when the theme is updated.

By using these targeted CSS snippets, you can effectively take control of the layout in the Twenty Twenty theme and create a design that better suits your content.

Related Support Threads Support