Preview vs Real device

Hello everybody,

I always encounter weird a drift off from the preview vs the real device. I talked once to the support, they said it is caused by the way I setup the site. But with clean assets and really simple layout it still drifts off. The logo for example, in the preview it is all centered with the same padding, but on my phone the S is touuching the line from the div object. So it is hard for me design like that.

Any advice?

https://preview.webflow.com/preview/paul-louis-design-7e71a9?utm_medium=preview_link&utm_source=dashboard&utm_content=paul-louis-design-7e71a9&preview=c7f72a1bc1047953a4d7a513ca8db9e7&workflow=preview

Your font size and element width are competing against each other. If you remove the width, you’ll avoid the squeeze problem.

If you want it to be perfectly square, you might try Ratio: Square.

Ideally I’d make your logo an SVG instead, which gives you much more precise whitespace control. between your text and border.

A 3rd approach is to place the border on a DIV wrapper instead of the text element itself. Make it flex, square ratio, and center the contents horizontally & vertically.

1 Like