BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty twenty-one

How to Reduce or Remove Unwanted White Space in Twenty Twenty-One

30 threads Sep 10, 2025 Theme → Twenty twenty-one

Content

One of the most common questions from users of the Twenty Twenty-One theme is how to manage the large amounts of white space that can appear around headers, between blocks, and above the footer. This space is a core part of the theme's modern, spacious design, but it's not always suitable for every website. This guide will explain why this space exists and provide the most effective CSS solutions to control it.

Why is There So Much White Space?

The Twenty Twenty-One theme uses a design system based on CSS variables for consistent spacing. The primary variable controlling vertical space is --global--spacing-vertical, which is set to 30px. This variable is used to calculate padding and margins for many elements, including the header, content areas, and footer. This creates a clean, airy layout but can sometimes result in more space than desired.

Common Solutions for Reducing White Space

The following CSS snippets can be added to your site via the Appearance → Customize → Additional CSS panel in your WordPress dashboard. This is the recommended method, as it ensures your changes are not lost when the theme is updated.

1. Reducing Space Above the Footer

This is perhaps the most frequent request. A large gap between your page content and the footer is often caused by the widget area margin. To reduce it, use the following CSS:

.widget-area {
  margin-top: 10px;
}

You can adjust the 10px value to your liking. For a more drastic reduction, this combination has proven effective for many users:

.no-widgets .site-footer {
  margin-top: 0;
}
nav.footer-navigation {
  margin-top: 0;
}

2. Reducing Space Below the Header/Menu

To remove the pronounced gap between your menu and the page content, target the site content's padding.

.site-content {
  padding-top: 0;
}

3. Reducing Space Between Blocks

To tighten the default spacing between Gutenberg blocks (like paragraphs and headings), you will need to adjust the block gap.

.entry-content > * {
  margin-top: 20px;
  margin-bottom: 20px;
}

Adjust the 20px values to achieve your desired spacing.

4. Removing the Horizontal Line in the Footer

If you have a dark background, the white footer separator line might be undesirable. It can be removed with this code:

.site-footer > .sep {
  display: none;
}

Important Notes and Troubleshooting

  • Specificity: Sometimes, your custom CSS might not override the theme's default styles. If a change isn't working, try adding !important to the rule (e.g., margin-top: 0 !important;). Use this sparingly.
  • Browser Inspector is Your Best Tool: To find the exact element causing space on your specific site, right-click on the area and select "Inspect" or "Inspect Element." This will show you the HTML structure and the CSS rules applying to it, allowing you to identify the correct class to target.
  • Mobile vs. Desktop: The theme uses responsive CSS. A change that works on desktop may not work on mobile, or vice versa. Use the browser inspector to test how your site looks on different screen sizes.
  • The "Edit" Link: If you see an "Edit" link and a large space at the bottom of a page, note that this link is only visible to logged-in administrators. Regular visitors cannot see it, so you typically do not need to remove it.

By using these targeted CSS solutions, you can fine-tune the layout of your Twenty Twenty-One theme to perfectly match your design vision without altering the core theme files.

Related Support Threads Support