Webflow sync, pageviews & more.
NEW

How can I remove the white space under the footer in Webflow?

TL;DR
  • Check and remove extra margin or padding on the footer, last section, body, or wrapper elements.
  • Remove unnecessary 100vh min-heights and delete hidden or empty divs that may add space at the bottom.
  • Inspect custom code or embeds for overflow issues and preview across breakpoints to confirm the fix.

Unwanted white space under the footer in Webflow is typically caused by extra margins, padding, or unneeded spacing on the last section of the page. Here's how to identify and fix it.

  • Click the Footer in the Webflow Designer and check its padding and margin settings in the right sidebar.
  • Make sure there is no extra bottom margin on the footer or the last section before the footer.
  • If you're using a Symbol, double-click to open it and inspect its internal spacing.

2. Check the Body and Page Wrapper

  • Select the Body element and ensure it doesn't have unexpected bottom padding or margin.
  • If you're using a wrapper div for content, check its spacing settings as well.

3. Inspect Section Heights

  • If any section (including the footer) has a min-height: 100vh (100% of the viewport height), it might push content down unnecessarily.
  • Change or remove this value if it’s not needed, especially on the final section or footer.

4. Review Hidden or Empty Elements

  • In the Navigator panel, look for invisible or empty divs at the end of the page.
  • Delete any elements without content or unset their height/margin.

5. Check for Custom Code or Embed Elements

  • If you're using custom code or embeds (like chat widgets or iframes), inspect their containers to ensure they aren't adding extra vertical space.
  • Set overflow: hidden on parent elements if necessary to contain expanded content.

6. Preview and Adjust Responsively

  • Use Webflow's Preview Mode to see if the space is still there.
  • Also test on different breakpoints to ensure the issue isn't responsive padding or margin.

Summary

To remove white space under your footer in Webflow, eliminate extra padding or margin on your footer or final sections, check for 100vh min-heights, and remove hidden or empty divs at the bottom of the page. Use Preview Mode to confirm your fix across breakpoints.

Rate this answer

Other Webflow Questions