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

How to Reduce White Space and Adjust Layout Spacing in Twenty Sixteen

28 threads Sep 16, 2025 Theme → Twenty sixteen

Content

Many users of the Twenty Sixteen theme find themselves wanting to adjust the default spacing, particularly the prominent white space around headers, menus, and content areas. This is a common request for those looking to create a more compact, custom layout. Based on community discussions, here are the most effective solutions.

Why is There So Much White Space?

The Twenty Sixteen theme is designed with a focus on readability and a clean, modern aesthetic. This often results in significant padding and margins around key elements. While this is great for many sites, sometimes a tighter layout is desired. These adjustments are typically made by adding custom CSS.

Common Solutions for Reducing Spacing

1. Adjusting Header and Menu Spacing

A frequent target for adjustment is the space above, below, and within the header (#masthead). To reduce the padding below the header (which affects the space before the content begins), you can use this CSS:

#masthead.site-header {
    padding-bottom: 10px !important;
}

You can adjust the 10px value to your liking. A smaller number will reduce the space further.

2. Reducing Space Between Posts or Widgets

To tighten the space between widgets in a sidebar or between posts on a page, you will need to target the specific elements. The CSS required can vary greatly depending on your setup, but often involves adjusting the margin or padding on elements like .widget.

3. Centering Content After Changing Width

If you change the width of your main content area and it becomes off-center, remember to add auto margins. A common fix is:

#page {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
}

4. Hiding Page Titles

To remove page titles that you don't want to display, use the following CSS:

.page h1.entry-title {
    display: none;
}

How to Add This Custom CSS

To implement any of these changes:

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

Important: It is highly recommended to use a child theme or a custom CSS plugin to make these changes. This prevents your modifications from being overwritten when the theme is updated.

Troubleshooting Tips

  • Use your browser's inspector tool (right-click on an element and select 'Inspect') to identify the exact CSS classes controlling the spacing you want to change.
  • After adding CSS, clear your browser and site cache to see the changes immediately.
  • The !important rule can help override stubborn default styles, but use it sparingly.

Remember, these solutions are based on common community fixes. Your specific site may require slightly different CSS selectors depending on other plugins or customizations you have active.

Related Support Threads Support