BugWP logo BugWP
Back to Community
Home / Community / Theme → Twenty seventeen

How to Remove Unwanted White Space in the Twenty Seventeen Theme

30 threads Sep 16, 2025 Theme → Twenty seventeen

Content

One of the most frequent questions from users of the Twenty Seventeen theme is how to eliminate unwanted white space or gaps on their pages. This space can appear above headers, below footers, between posts, or around specific elements like sliders or menus. Based on common community solutions, this guide will help you identify and fix these spacing issues.

Why Does This White Space Appear?

In the Twenty Seventeen theme, white space is typically not a bug but is intentionally added through CSS properties like padding, margin, and positioning. This space is part of the theme's design to create a balanced, readable layout. However, when users modify their site by adding custom elements (like a Meta Slider), removing default ones (like sidebars or post titles), or using page builders, the intended spacing can sometimes become excessive or appear in unwanted places.

Common Solutions Using Custom CSS

The most effective way to adjust this spacing is by adding custom CSS. You can do this by navigating to Appearance > Customize > Additional CSS in your WordPress dashboard. The following code snippets address the most common scenarios reported by users.

1. Remove Space Below a Slider or Specific Plugin Element

If you have an element like the Meta Slider and notice a white bar below it, the plugin's CSS is likely adding padding. To remove it, use a code snippet similar to this:

.ms-theme-radix {
    padding-bottom: 0px !important;
}

Note: The CSS selector (e.g., .ms-theme-radix) may change depending on the plugin you are using. Inspect your page with browser tools to find the correct class.

2. Reduce Space Between Posts on the Blog Page

To decrease the large gap between blog posts, target the article elements with this CSS:

.site-content .site-main article {
    padding-bottom: 2em; /* Adjust this value to your liking */
}

3. Remove Space Between Page Titles and Content

To minimize the margin below a page or post title, use this code:

.entry-header {
    margin-bottom: 12px; /* Adjust this value to your liking */
}

4. Eliminate White Space at the Very Top or Bottom of a Page

To remove a white bar above the header or below the footer, you may need to override the theme's background and spacing. This often involves the .site-footer and html elements.

.site-footer {
    border-top: none;
}

html {
    background: #303030 !important; /* Change to match your site's background color */
}

5. Adjust Space for a Hidden Sidebar

If you have disabled your sidebar but the content area is not expanding to full width, use this media query to override the default container width.

@media screen and (min-width: 48em) {
    .page-one-column .panel-content .wrap {
        max-width: none !important;
    }
}

Important Considerations and Troubleshooting Tips

  • Use !important Sparingly: The !important rule is powerful and can override other styles, but it should be used as a last resort to avoid future styling conflicts.
  • Browser Developer Tools are Your Friend: To find the exact CSS class causing your specific spacing issue, right-click on the element in your browser and select "Inspect." This will show you the HTML structure and the CSS rules applied to it.
  • Page Builder Conflicts: Many threads mentioned using page builders like Elementor. Often, excessive space is caused by the page builder's own containers and settings. If you use a page builder, check its settings for padding and margin options first, as their styles will usually override theme CSS.
  • Child Theme: For permanent changes, it is highly recommended to add custom CSS to a child theme rather than directly editing the parent theme's files. This prevents your changes from being overwritten during theme updates.

By using these targeted CSS solutions, you can successfully remove unwanted white space and achieve the custom layout you want for your Twenty Seventeen theme.

Related Support Threads Support