This design seems to fit just right in the editor,
but on the live site, suddenly there’s this extra gap.
Huge gaps can be a huge pain. But they’re quick to solve.
So let’s fix it.
A lot of the time, gaps happen because of the responsive behavior of our elements. Let’s start with this form. The responsive behavior is set to Relative width, which means the width changes in relation to the parent element, the cell.
So when I resize the canvas, the height of the form stays the same. Only the width changes.
But if we look at the section, the responsive behavior is set to scale proportionally. When I make the canvas bigger, the width and height change in proportion to each other. The section gets wider and taller.
The problem is, the section is getting taller, but the form inside isn’t. That’s what creates the gap we see on bigger screens.
The same thing happens if the form’s responsive behavior is set to Fixed.
We make the screen bigger, the section gets taller, but the form’s height stays the same. So, there’s that gap.
Let’s change it back to Relative width, and see how to fix the issue.
Here’s what we do. We’ll change the section’s responsive behavior to Fixed height, so the section height stays the same.
Now we’ll resize the screen—and the gap is gone.
And here’s something that’s helpful to know about Fixed height. Behind the scenes, it’s actually set to a minimum fixed height. So the section won’t get smaller than this.
But it can get taller in some cases. Like if we add an element that affects the height. For example, we’ll add some text that’s set to wrap to another line.
The text pushes the section down and makes it taller. So you won’t have to worry about any elements overflowing out of the section, but they can affect the height.
I’ll go ahead and delete that, and publish the site.
And when I check the design on a wider screen, it’s looking much better. No more gap.
Thanks for watching. Check out more Troubleshoot videos in the Wix Studio Academy.
