[Resolved] Z depth Error on mobile but looks fine on desktop webflow

[spokeydokey00 (Radley)]

Hi Everyone,
I’m having an issue where everything looks fine on my desktop version of my website but on a tablet and mobile I’m having weird z depth overlapping with my header.

Here are different correct versions of my site on desktop:

Correct Published desktop site:

Correct tablet view from desktop:

However when I pull up my website on my iPad and iPhone I see this:

In the iPad the entire image for some reason is over the header. And from my iPhone just certain image elements overlap the header.

Anyone have any idea what’s going on?

Thanks,
Radley

---

Here is my site Read-Only: https://preview.webflow.com/preview/radleys-portfolio-scratch?utm_source=radleys-portfolio-scratch&preview=ce411e52a920956f6861b0f9a935280d

[Brando (Brandon Roche)]

Hi @spokeydokey00

I took a peek at you webflow.io subdomain on an iPhone 8, and then an iPad using a browser emulator, but am unable to see the same behavior on this end.

Were you able to find a solution for this or do you still see the z-index error on your end? If you are seeing other behavior on your end, can you send me a screen recording of what you see? CloudApp or Quicktime work well for this.

Thanks!

[spokeydokey00 (Radley)]

Hi Brando,

Yes I was able to find a solution. I tweaked the Z depth settings to something real small like 0.01 and it fixed it. I still wasn’t able to see the issue in webflow. I had to publish and load my page on mobile and tablet but I was able to fix it.

Thanks!

[Brando (Brandon Roche)]

Happy to hear it @spokeydokey00