How to remove white space below the header and above the footer?

You want to remove the white space that is positioned below the header area and above the footer on pages/posts, right? To remove this space:

Space Above and Below Content

How to get rid of it on a single page?

You just need to add some custom CSS to the page. Edit the first row of Page Builder and click on Attributes. Add this line of CSS in the CSS Styles:

margin-top: -3.75rem;

Then edit the last row of the Page Builder editor and add this line in the CSS Styles box as well:

margin-bottom: -3.75rem;

Once you do that, the result should look like this:

No Space Above and Below Content

The actual value (-3.75rem in this case will differ from theme to theme), so here is the list of values for our newer themes:

StructurePress: -3.75rem;


Auto: -5.625rem;

Bolts: -5rem;





How to get rid of it on all pages?

If you want to get rid of these spaces on all pages, you can also write some custom CSS and put it in the Appearance -> Customize -> Theme options -> Custom Code -> Custom CSS.

For example custom CSS for StructurePress would be:

.breadcrumbs, .hentry { margin-bottom: 0; }

And for Shaka it would be:

.page-header, .content-area { margin-bottom: 0; }

BuildPress theme

BuildPress theme is a little bit different though. You can remove the white space before the footer for all pages with this custom CSS (paste it as described above):

.master-container {
  margin-bottom: 0 !important;

However, if you want to remove the spacing only on certain pages, you will need to target these more specifically. In WordPress, you can target pages/posts by ID which is added to the <body> class, so you can find the page-id-<id of the page> classes on the body tag. One example of the code would be:

.page-id-171 .master-container {
  margin-bottom: 0 !important;

Here is how you find classes using Chrome dev tools:

You can also find page / post IDs by looking at the URL bar when editing the certain page:

Url Page ID