Responsive differs in webflow view

I’m having a hard time understanding why some basic elements looks different in Webflow vs. Google device simulation and on real device.

For example

This is the 667px width view in webflow:

This is the 667px width view (iphone 6 landscape) in google chrome tools device simulator:

And this is on my physical iphone:

So physical device and google simulator is very close to eachother.

So my question is

Why is a basic element like the text block ‘breaked’ differently on webflow compared to the others? Because the font apparently is rendered ‘bigger’ on the physical device compared to chrome, and therefore ‘breaks’ differently?


Here is my public share link: LINK
(how to access public share link)

Can you give me your read-only link so I can check and show you why it behaves like this?

Thank you very much @vincent

https://preview.webflow.com/preview/bs4?preview=ef007d0198b55bf816e8f51876658c0d

Did I accidentally withdraw my post?

No, but I withdrew my first answer because I answered before I read your question :smiley: I do that often… Let me see your site.

http://vincent.polenordstudio.fr/snap/1w6wq.jpg

http://vincent.polenordstudio.fr/snap/ft9im.jpg

http://vincent.polenordstudio.fr/snap/jkta4.jpg

Actual captures on iphone 6

http://vincent.polenordstudio.fr/snap/IMG_2398.PNG

then 6+

http://vincent.polenordstudio.fr/snap/IMG_9030.PNG

Visually, they’re all the same. I mean the text has the same size and proportion on all devices and program when you look at them from the real world. if you paste a capture of iphone here it can look beggier but phones have retina displays.

But yeah there’s a difference in rendering between the designer and everything else. It’s even ore pronounced on my computer.

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