When we look at this section in the editor, our elements are spaced just right,
but when we go to the live site, they’re all over the place.
Overlap on different viewports is a common problem.
Let’s fix it.
There are two things that usually cause overlap. The first is how elements are positioned. Like here. The title is docked to the top of the cell with a 34 percent margin. Meaning its distance from the top edge is calculated based on the size of its parent container, the cell. As the cell size changes on different viewports, the title’s position changes with it.
The paragraph is also docked to the top—but the margin is in pixels. It’s fixed. The paragraph stays the same distance from the top edge, no matter the screen size.
And the button is docked to the top with a margin in percent. So all three elements are positioned in relation to the top of the cell, with different units, and this is what defines how they’re positioned.
So while they look how we want on this screen size,
As we resize, the title and button change position, while the paragraph is set to a fixed distance from the top. The elements are positioned independently from each other, so they start to overlap.
In the Layers panel, you can also see that the elements are all in the same cell. But there’s nothing to define how they interact.
To create a relationship and fix our overlap problem, we just need to select these three, and stack them.
This places the elements in a flex container where we can control the spacing between them.
Now when I resize the screen, the elements keep that spacing. There’s no overlapping or drifting apart. Even as the paragraph text wraps to another line—it pushes the button down.
We can see this change reflected in the Layers panel—the Stack is in the cell, and the elements are together in the Stack.
I’ll publish and check the live site…now our overlap issue is solved. So that’s solution one: check how elements are positioned, and if needed create a
Stack to give them a relationship and control the spacing.
The second thing that often causes overlap is the responsive behavior of
each element. Here, overlap is happening because they’re all set differently.
The title is set to scale proportionally…
…the paragraph wraps…
and the button is fixed.
So when we resize, they’re all behaving differently which causes them to overlap.
The solution here is the same as before—stack them.
It’ll keep the spacing between elements, even as the screen resizes. And that’s all we need to do to fix overlap. Create a Stack.
Thanks for watching. Check out more Troubleshoot videos in the Wix Studio Academy.
