Display bugs in different browsers

[m-jsl (Maud)]

Hello all,

I’m meeting a huge display issue with my portfolio site.
In Chrome & Opera, the site displays perfectly but as soon as it gets in Safari or Mozilla Firefox everything goes wrong with my homepage.
I was wondering what I could do to sort this out. Is there any workaround tool I could use?

Here come screenshots from the different browsers.

Chrome

Opera

Safari

Mozilla Firefox

Thanks a lot for the help

[mikeyevin]

Welcome to the community @m-jsl!

I’d actually say this is a fairly minor issue caused by how you’re sizing the containing element for your headline, but without taking a closer look at the live site and/or your read-only link, it’s going to be hard to give you a solution.

How to Enable a Webflow Share Link

If you’re new to the Webflow forum, welcome! Anyone with the read-only link of your project can explore your project in the Designer. Any changes they make while in read-only mode will not be saved. This is helpful when you need design advice or when you need help troubleshooting an issue in your project. [Create and use a read-only share link — Webflow tutorial]

Can you please provide us with those extra details so I can take a peek at how you’ve got things structured?

[miekwave (miek)]

@m-jsl

Can you make share preview link? It will help us diagnose butter.

I observe similar effects on my projects with different zoom settings. Please confirm zoom level in each browser instance.

Have you tested
base px
base ch
base em
base rem
base vw
?

If the The REM value in each browser is different, for example, chorme and opera might have a rem value of 17px, but firefox might have a rem value of 12px, then you may observe differnt font sizes between browsers.

I usualy set base font size in '<'body> all tag to set fixed base em font size and not rem font size

Also is each browser using the same responsive viewport? Did you confirm each browser is rendering the same viewport?

If you have 1280 1440 1920 breakpoints, you may potentially see different resoluts on different browsers depending on browser dpi settings and browser zoom settings

[m-jsl (Maud)]

Thanks, @mikeyevin!

Here comes the read-only link so you can check it out!

To let you know more, the text is an svg and I tested my site on each browser on my mac. Someone suggested giving the element a width of 30vw on the largest breakpoints, I tried it out this morning and it worked!

[mikeyevin]

Glad to hear you got this figured out! SVGs can definitely be a little tricky to work with and thankfully it sounds like it was a relatively easy fix.

Happy designing