How can I remove the white space under the footer in Webflow?
TL;DR
- Ensure the footer is the last element in the Body with no extra elements below.
- Remove any unwanted padding or margin from the footer and section above.
- Set Body and HTML to min-height: 100vh and remove unnecessary height styles.
- Check for absolutely positioned elements or hidden content causing overflow.
- Verify overflow settings and test responsiveness in different breakpoints.
- Use Preview and Publish modes to confirm spacing issues are resolved.
If you're seeing white space under the footer in Webflow, it's usually caused by layout issues such as body height, unused padding/margin, or positioning conflicts.
1. Inspect Footer and Page Structure
- Select the Footer element on your canvas.
- Make sure it’s the last element inside the Body—there should be no extra elements below it.
- If you use a Wrapper or Main Content Div, ensure you close the structure properly right before the Footer starts.
2. Check for Unwanted Margin or Padding
- Select the Footer and the section above it.
- In the Style panel, check if there is any bottom padding or top margin that could create extra space.
- Set any unexpected values to 0.
3. Set Body and HTML Height Properly
- Go to your Body and HTML elements (via the Style panel or page settings).
- Ensure both are set to min-height: 100vh or don’t have fixed height values affected by internal padding/margins.
- If they have unnecessary styles, remove them.
4. Check for Absolute or Fixed Positioning Issues
- Make sure nothing (e.g., modals, pop-ups, or sticky elements) is absolutely positioned and taking up extra space below the page.
- Use Webflow’s Navigator panel to find hidden elements.
5. Review Overflow Settings
- Check if any parent section or wrapper has overflow: auto or hidden. This can cause scroll bars or spacing issues.
- If on mobile, test using Webflow’s responsive view to ensure it's not a breakpoint issue.
6. Use the Preview & Publish Modes
- Use Preview mode (eye icon) to see how the page renders without Webflow’s editing UI.
- Publish and view the live site—sometimes spacing only shows up in the published version due to combo class bugs or CSS rendering differences.
Summary
To remove white space under the footer, inspect layout structure, remove unwanted margin/padding, and ensure no hidden elements or improper positioning are creating extra space. Use Preview and Publish to test the result.
