Themeisle Docs

Appearance

neve

Save hours, not minutes – launch faster with 110+ patterns, powerful pro tools, and priority support when it counts!

See Pro Plans →

Neve Displays Whitespace Between Content and Footer ​

If you notice an unexpected gap of empty space between your page content and the footer — on desktop or mobile — this guide explains why it appears and how to resolve it.

Understanding the Cause ​

Neve uses a flexbox-based page structure to ensure the footer always stays at the bottom of the viewport. The main content wrapper — .neve-main — is set to flex: 1 auto by default, which causes it to grow and fill all remaining vertical space between the header and footer.

On most pages this is desirable: it prevents the footer from floating halfway up the screen when a page has little content. However, when a page contains only a small amount of content — for example a single slider, a short text block, or a minimal landing page — the flex-grow behavior makes .neve-main stretch visibly, producing a large white gap between the content and the footer.

📝 Note: This is intentional theme behavior, not a bug. The gap appears because the page content is shorter than the available viewport height. It can occur on both desktop and mobile viewports depending on screen size and content length.

Quick CSS Fix ​

To remove the gap, you can override the default flex behavior for .neve-main by adding a small CSS snippet through the WordPress Customizer.

  1. In your WordPress Dashboard, go to Appearance > Customize.
  2. Click Additional CSS at the bottom of the panel.
  3. Add the following snippet:
css
.neve-main {
    flex: unset;
}
  1. Click Publish to save.

⚠️ Important: Setting flex: unset removes the stretch that keeps the footer pinned to the bottom of the viewport. On pages with very little content, the footer may no longer sit at the bottom of the screen. Test all your pages after applying this change.

After publishing, check the affected page on both desktop and mobile to confirm the gap is gone.

Best Practices and Alternatives ​

Rather than overriding the flex behavior globally, consider the following alternatives. They resolve the visual gap without changing the layout contract of the theme:

  • Increase content height — If the page uses a slider, hero image, or banner, set its minimum height to match or exceed the viewport height (for example, 100vh). This fills .neve-main with the element itself, leaving no empty space for the flexbox to expand into.
  • Add more content to the page — Adding even a short text block, a call-to-action section, or a widget area gives .neve-main real content to fill the space, eliminating the visible gap.
  • Scope the CSS fix to a specific page — If only one page is affected, target it more precisely to avoid side effects on other pages. Use your page's body class (for example .page-id-123) as a selector:
css
.page-id-123 .neve-main {
    flex: unset;
}

Replace 123 with your actual page ID. You can find the page ID in the URL bar when editing the page in WordPress (Edit Page shows ?post=123 in the address).

Related articles: