Images dissapearing on mobile devices

Design help General
1

Hello,

I have a problem with my Webflow website. The images disappear when I watch them in Portrait mode on mobile devices. It seems to happen randomly. When I looked into the source code of my website I saw that Webflow is automatically assigning “sizes” to the image. So when the viewport is below 479px, the size (height) is 0px. The only way to change it is to apply a fixed size on the image. But how can I change this without having a fixed size?

I already tried changing the lazy load of the images. I also tried to remove the CSS from the image, but these things do not work.

<img src="https://uploads-ssl.webflow.com/624c1bfed0c751bc361214d3/639614be67bb258c0bf13a39_TESTMAP.JPG" alt="" sizes="(max-width: 479px) 0px, 100vw" srcset="https://uploads-ssl.webflow.com/624c1bfed0c751bc361214d3/639614be67bb258c0bf13a39_TESTMAP-p-500.jpg 500w, https://uploads-ssl.webflow.com/624c1bfed0c751bc361214d3/639614be67bb258c0bf13a39_TESTMAP-p-800.jpg 800w, https://uploads-ssl.webflow.com/624c1bfed0c751bc361214d3/639614be67bb258c0bf13a39_TESTMAP-p-1080.jpg 1080w, https://uploads-ssl.webflow.com/624c1bfed0c751bc361214d3/639614be67bb258c0bf13a39_TESTMAP.JPG 1279w" class="mapimage">

Kind regards,

Vincent

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey, did you ever get this fixed? I’ve encountered the exact same issue tonight and been trying to fix it for 5 hours now. I guess I will have to resort to fixed sizes, but this is really not ideal, considering it was working just fine earlier on. :no_mouth:

3

@Jessica_Brownless

For anyone who has the same problem. I think I have finally figured out why this problem keeps happening. I have a link block above my image, which automatically gets the display mode: inline-block. This causes the problem for the image to disappear on mobile devices. Set the display mode from inline-block to block, and the problem is fixed.