Images not displaying on mobile

Hey guys,

I’m new to Webflow, so far just playing with it, and I must say so far so good.
I’m also not a pro web designer by any means, so I beg your pardon if this question is somewhat dumb, but I could not find an answer on the web.

Basically, as the title says, the images don’t display on a mobile device as they should. At least Chrome’s developer tools an Webflow’s built in mobile simulators show that everything should be ok on a smaller screen, but everytime I see whitespace where the images should be.

Here’s a link http://truenorth-df57bb.webflow.io/

Anyone got an idea what might be causing the problem?

Oh, by the way, it’s not a file size thing. I’ve seen on the web that a similar problem might be caused by files being too large, so I compressed them. I’ve tried compressing them even harder then they are now, and still no luck, so I returned to the point where all files are smaller (most of them much smaller) than 250kb, which is said to be a sort of limit for mobile devices (though I doubt it, cause I remember loading huge images with my phone, much larger than ones that I use on my website).

Ok, any help would be much appreciated :slight_smile:
Cheers,
Jon.


And here is my public share link: LINK

Hi @jon.abides

I’m glad you’re loving Webflow. But seems your links are broken. Can you update them with working links please so, we can help you solve the issue?

Oops.
I think it’s caused by me playing around in project settigs. :sweat_smile:
Here’s a working link

Hey, i tested on my mobile, all images present. (Chrome, Samsung J7)

What environment are you testing on?

Thanks for testing it on your device.
It’s nice to see it working somewhere.

Though it still doesn’t display any images in iOS Safari I’ve been testing it with.
All I see is body background.

Try to enable responsive variants for your images.

I’m afraid I don’t have this option.

Still, I don’t see why would one device treat image correctly, and the other wouldn’t.
I mean, I’ve checked on multiple iphones, not just mine, so it’s not a device issue.

So nobody ever ran into something like this, and does not know what might be causing the problem?

I still haven’t found the solution.

It’s funny, other images on the page are showing perfectly fine, thought they are much larger in size, than those not displaying.

Hi @jon.abides

I finally found the culprit. Your images weren’t loading on Safari even on Desktop.
Seems like some browsers are ignoring percentage-based height values.

So, the images will appear when the percentage value is removed or replaced on the picRow element.

See the animation:

Of course, you might need to make some adjustments to the flex settings or the height value to get the images to show as you want them to.

​Hope this is helpful.

All the best,
Anna K

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.