Overlapping Elements on Mobile Viewports

Design help General
1

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!

IMG_7354
IMG_7354828×1437 225 KB
IMG_7356
IMG_7356828×1209 107 KB

Here is my read-only link: Webflow - Components

2

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