Position is different on Safari than on Chrome

Hello Webflow community

I have the following problem:
Two elements in my header are positioned perfectly when I look at the website on my Chrome browser. But on my client’s Safari browser, the elements are positioned far more right and are cut off at the right edge. Does anybody have an idea how to prevent this?

I positioned the elements absolute and set the left: and right: tag to auto so the element is always in the middle. Then, I added a custom margin to the left, so a specific part of the element is always in the middle. On Safari, it semms that this margin is a lot larger than on my Chrome browser.

Chrome:

Safari:

Style of the logo:
image


Here is my site Read-Only: LINK

Servus Moritz,

First of all I would def recommend you to build this hero in a proper way instead of using all elements in absolute. If you would do followings i thing your problem will be solved.

  • Create a container with max-width and 100% width inside of your section div (header)
  • Add another div with flex and relative inside of your container for your headline and put it inside of it without using any absolute positioning and then adjust the margin as you want.

Other suggestions I can def suggest you would be:

  • Optimise and resize your bg hero image for web (it is currently 3mb which is very huge)
  • Improve the quality of your design
  • For god sake use some spacing, and let the elements breath. I was almost choked when I open your preview link :slight_smile: White space is the most important thing in design and composition.

Best
Barry aus Wien

1 Like

Hi Barry,

Thanks a lot for your detailed feedback.
I created a div with flex and realtive position so I didn’t need to use absolute position on the inner elements and this works just fine.

Thank you for the other suggestions, too!

Best, Moritz