Display bugs in different browsers

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 :slight_smile:

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.

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

@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.
image

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

Thanks, @mikeyevin!

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

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!

2 Likes

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 :webflow_heart:

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