Streaming live at 10am (PST)

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

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

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!

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!

1 Like

Happy to hear it @spokeydokey00 :smile: