Streaming live at 10am (PST)

Images not displaying on mobile


#1

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


#2

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?


#3

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


#4

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

What environment are you testing on?


#5

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.


#6

Try to enable responsive variants for your images.


#7

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.


#8

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.


#9

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


#10

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