Problem with vertical spacing (Link included)

[Nikar]

Hi all,

Pls view my isolated site in the link below where I’ve created a dummy site that emulates the problem I’m facing.

1. Go to below link
2. Switch to Tablet view.
3. Drag the right side (the breakpoints bar) of the tablet view to expand the width of the view.
4. You’ll notice that, the wider the width as you drag the bar, the vertical space above the “2” graphic gets disproportionately large!

I want the space above the “2” to be more or less the same regardless of how much I drag the width in tablet view (it should be at least proportionate)

Is there a way to fix this? Tks!

---

Here is my public share link: https://preview.webflow.com/preview/protosite-f4bbc59e982a18a4c935cfd0be058?preview=d826288f9471ec1a5f156117326c77eb
(how to access public share link)

[vincent (Webflow Expert)]

When you expand the viewport, the image in the background of the first section increases in size bicause it’s big, making the fiest section taller and taller, pushing down the second section with the “2” graphic.

As the image is a background, try to add it as a background of the first section, rather than as an image. You’ll then get plenty of options to control the height of the first section and keep the second in view.

[Nikar]

Hi Vincent, I’ve been tinkering with the background-image technique but it seems to be harder to control.

See the link again: https://preview.webflow.com/preview/protosite-f4bbc59e982a18a4c935cfd0be058?preview=d826288f9471ec1a5f156117326c77eb

I’ve changed the circles to be background images of the sections, but when you go to tablet view and resize the width larger, the 2nd section doesn’t move, it just stays there and the first section grows bigger, ending up with the first section getting obscured by the second.

How do I make it so that the 2nd section is responsive as well, and moves down when the 1st section enlarges?

Tks!