Mobile Landscape Breakpoint - Overlapping Elements

Hi Webflow Form Community!

I am having some overlapping issues on my 404 mobile landscape breakpoint (every other breakpoint seems to be okay) that I am hoping to get your expertise on.

This issue I have been having is only happening on the published site.

For some reason, the logo seems to sit on top of my content, when it should sit at the bottom of the page (please see the images below for a clearer explanation).

Problem
The logo should ideally site below the grey box and be on the green background

How It Should Appear
Example below is the portrait landscape

I have also included the published and preview link below.
Any help with this would be greatly appreciated. Thanks :slight_smile:


Here is my site Read-Only:
https://preview.webflow.com/preview/foster-creative?utm_medium=preview_link&utm_source=dashboard&utm_content=foster-creative&preview=cad32553fe75337052e0136250e7d827&pageId=5ebf37362329dd699b674a1e&mode=preview

Here is the Published Site Link:
https://foster-creative.webflow.io/404

Hi Marie,

Hmm - could be because that ‘404 logo div’ is set to absolute. On the portrait phone, tablet etc. the content (i.e. 404, did you know, text etc.) pushes the screen down far enough that the logo stays below.

However on landscape phone, seems that all the content above can sit easily within the screen space and as the logo is set to the bottom and absolute, it just pushes it up and overlaps.

Unsure if there’s a specific design intent here, however changing the position to ‘relative’ and repositioning may work.

Cheers, Dom

Hi Dom,

Thanks for reaching out and taking a look at my 404-page issue. :slightly_smiling_face:

I tried your suggestion of changing the position of absolute to relative, however, the logo still appears to be on top of the content and isn’t positioned at the bottom of the page (on the green - similar to the portrait view).

Any other suggestions? Apologies if I misunderstood your suggestion.

Thanks!
Marie