Layout issue on mobile landscape

Design help Animations & Interactions
1

I am trying to troubleshoot this layout issue I am having. I can’t seem to consistently recreate it by resizing my Chrome browser, it is only happening on my actual mobile devices. See attached screenshots.

28%20PM
28%20PM1904×979 194 KB
36%20PM
36%20PM1904×978 140 KB
45%20PM
45%20PM1907×978 88.6 KB

The above images show how the layout should look and behavior. As you can see it works on all three preview modes on Webflow. However, when I publish and do some playing around on my Pixel 3 XL Chrome browser and on my iPad browser I get these outcomes:

PNG
PNG2048×1536 539 KB
PNG
PNG2048×1536 498 KB
Screenshot_20190325-180326
Screenshot_20190325-1803262960×1440 525 KB
Screenshot_20190325-180334
Screenshot_20190325-1803342960×1440 605 KB

I’ve tried playing around with every display property, margin and padding setting I can think of but can’t seem to figure it out. Any help?

Nick

Here is my site Read-Only:

https://preview.webflow.com/preview/nicholaspfosiphoto?utm_source=nicholaspfosiphoto&preview=6532666811a6dde76efa787602d44637

2

@npfosi - Thanks for taking the time to share lots of screenshots describing your problem. It will go a long way to help the path to a solution. I notice you have lots of pages. Which one should we be looking at?

3

Oh apologies. Thought I had included that - it’s the “cruising” page… it is passworded… the password is projects if you need it for some reason.

4

Have you tried to create a basic layout (static) with the html structure and classes for the proj-details-wrapper? if not, I would do that to start.

It’s about isolation when dealing with debugging interactions on elements, on particular devices.

Looks like the page is “Projects”. I had to dive into your interactions to see.

5

It is… your right. Apologies my mind is all over the place - I am also working on the cruising page…