Webflow Mobile View is not the same as the Actual Mobile View

Hi Webflow Specialists,

The mobile view from the webflow design platform is different from the actual mobile view.

From the screenshot, it looks like either the picture is not correctly setup or the text underneath is overflowing. Or this is a bug?

Would anyone be able to help? I need this urgently.

Webflow Mobile View

Actual Mobile View


Here is my site Read-Only:(Webflow - greenmakeup)

Hi @Nowell_Chua ,
i checked it in my browser and it seems to be working correctly. What browser are you using?
And could you test another browser on your phone?

Maxi

I tested the site in chrome and it is working. But on mi browser it is not working. i´ll update if i find something new. So Update: it is also working in firefox.
I assume it is a lack of flexbox support in older browsers? i really don´t know, because you are not using any complicated css or new css features like grid.

Check this stackoverflow post.

Maxi

Hi Maxi,

Thanks for your quick reply.

I am using Chrome on my phone. That’s really weird, I used my friend’s phone on chrome to check and it doesn’t work as well. I also tried Safari, it is also showing the same result. What phone are you using? I have an iphone.

I am using an mi mix 2s with Android 10. And the newest chrome version.

I think your phone has a 6 inch screen, that’s why it doesn’t affect your view. I have an Iphone 8 which only has 4.7 inch screen. If I adjust the Webflow mobile view to the same Iphone 8 screen size, it is showing what I posted in the initial screenshots.

Hi @Nowell_Chua,
this should not be a problem, unless you are using vh units. (you are not)
I think it is browser related, because i get the same problem in one built in browser (mi browser).
I recommend you to set the height on your container to auto. (you need to change your sizing to dont shrink and grow for that)

Second Step:
I would add width:100%; to your div block 36 and set a bit padding to the top.

I don´t know why this shouldnt work.

Hope i can help
Maxi

2 Likes

Perfect! That’s working. Really appreciate your help on looking into this.