Struggling with Absolute Positioning on Mobile – Overlapping Elements

Design help Layout & Design
1

Hey Webflow Community,

I’m running into a frustrating issue with absolute-positioned elements on mobile breakpoints, and I’d love to hear how others have tackled this.

Since absolute-positioned elements aren’t part of the document flow, they don’t push elements down or create padding around them. On mobile, where viewport sizes can vary significantly, I’ve set positioning based on the largest mobile breakpoint, which looks fine at that size. However, when the viewport shrinks, the absolute elements start overlapping other content.

Because Webflow doesn’t allow custom viewport-based positioning, I can’t dynamically adjust the spacing as the viewport changes. And since absolute elements can’t push other elements down, I can’t add padding to the content below to ensure proper spacing.

I’m looking for ideas on how to handle this without relying on JavaScript

mobile-bad
mobile-bad722×1606 169 KB

mobile-good
mobile-good858×1600 91.9 KB

. Has anyone else run into this issue? Would love to hear how you’ve managed absolute positioning across different mobile screen sizes in Webflow!

Posting two images of a good looking element positioning vs. bad one at a smaller breakpoint.

Here is my site Read-Only: Webflow - Humble Education

2

Pretty simple- minimize the amount of absolute positioning you use, and generally box it within a relatively-positioned frame.

The relative frames will flow with your primary page layout.

You may need to adjust the absolute positioning within each of those frames at each breakpoint, and you may have to set a frame height to ensure the content fits properly.