Images visible in Webflow preview mode and on Chrome on Desktop when published, but not on Safari or on Chrome on Mobile

Design help General
1

Hi Folks,

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.

Screen recordings
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!

Cheers :slight_smile:

Here is my site Read-Only

2

Hi Ciaran, awesome site!

When I inspected your site in Google Chrome, I noticed that the hero image on mobile is 0px high. I think this is causing your issue in mobile view. I created a Loom video to show you.

Also, to solve the issue on safari, if you add a width to the hero image that should solve your issue. Here is another Loom video with more info.

Hope this helps, let me know how you go :blush:

1 Like
3

Ashley, I honestly can’t thank you enough for this help!!

I recorded a short video demonstrating the site working and I also took it as an opportunity to thank you vocally.

Please let me know what I can do to compensate you for your time and kindness.

Thanks again!

4

Oh yay, I’m thrilled to hear that you were able to fix the issues! That’s great news!

Thank you so much for the video and thanks :star_struck:. Really, no need to compensate me. When I started out, I received so much support from the community so I am just happy to pay it forward :blush:

Congrats on launching your new site, it looks fab!

1 Like