I’m really stuck on a problem building my portfolio. If I manage to explain it well enough that someone can help me, I’ll be shocked. But I’m desperate, so let’s try.
For anyone willing to try to help, before reading the following summary of the problem, it would be helpful to first watch the screen recordings (links below) to get a better visual understanding of what I’m describing.
I’ve designed a feature in the hero section of my portfolio which presents a large image with a 2nd image hidden behind it. Each image is cut into horizontal slices which rotate to toggle between the 2 images (like I said, this will make a lot more sense if you’ve watched the videos). The problem that I’m having is that the images within the “slices” are not displaying when the published site is viewed on mobile for both Chrome and Safari or on Safari on my Macbook.
The website works as I’d hope when viewed in all resolutions in Webflow’s preview mode and it also works as I’d hope when published and viewed in Google Chrome on my Macbook.
I needed to rebuild the hero feature for the mobile version because the design is slightly different (with less horizontal “slices”), so I took it as an opportunity to try to identify where the problem lies. In doing so, I noticed that the images are being displayed in the first slice and the last slice only. Here is a link to a PDF doc with screenshots to illustrate this more clearly.
Webflow preview mode: desktop view Working perfect
Webflow preview mode: mobile view Working perfect
Published site on Safari Not working
Published site on Chrome Mobile Not working, but showing the images in 1st and last “slices” only. See link to PDF for more insight.
If anyone does get around to casting an eye on this, I’ll really appreciate it. I’m fairly new to Webflow and design and I’m so excited to get this portfolio finished and apply for jobs ASAP!