Streaming live at 10am (PST)

Overlapping Elements on Mobile Viewports

Hey everyone! The issue I’m having is that my page elements are overlapping on mobile.

  • On mobile portrait and mobile landscape viewports all of my elements are overlapping each other. I’ve included screenshots of how the site renders on my iPhone below.
  • Rather than overlap, I’d like all of the elements to be responsive and share an equally proportionate amount of space between each other – just as the page appears in Webflow’s Designer.

Thank you so much for your help!


Here is my read-only link: https://preview.webflow.com/preview/components-303d42?utm_medium=preview_link&utm_source=designer&utm_content=components-303d42&preview=e678b06cba0cac2db682e6ef25ade222&pageId=5e48782aa90a2c62133952cf&mode=preview

Hi Matt,

you are experiencing layout issues because you are using elements with an ‘Absolute’ position.

Absolute positioning can cause all sorts of challenges with responsiveness if not constructed correctly.

To me it appears that’s it’s only the button that you want to move the position for different screen sizes, so that should be the only element set as ‘Absolute’

I’ll have a play and record my findings for you.

Keiran