Some issues in safari

Design help General
1

Hi Guys,

I am checking how my site looks in Safari, and I am running into two issues that I don’t know how to fix:

  1. I added arrows in my sliders. They display normally in Chrome, but in Safari they are cut off. The arrow images are located in the arrow div that I made absolute to place them on the slider itself.

  2. In the footer (when you scroll fully down) the words of the logo ‘De Watertoren’ should extend fully between the outer two lines. The image width is set to 100%, again it shows fine in Chrome, but not in safari.

Both issues can be viewed on this page: https://watertoren.webflow.io/onze-ruimtes

And this is the read-only link: https://preview.webflow.com/preview/watertoren?utm_medium=preview_link&utm_source=designer&utm_content=watertoren&preview=762f16958f7646320b2ae2a5957f10f2&mode=preview

Would be great to have some help on this! Thanks in advance.

2

hi @Hessel_de_Ronde it is because Chrome is more forgiving and just guess what you have meant with your code and Safari is more strict.

here is adjustments you can apply to make it work

Set your RIGHT arrow wrapper align to right and give it some basic width (eg. 160) with your preferred units. I have used px in this example.

CleanShot 2021-03-30 at 13.43.26
CleanShot 2021-03-30 at 13.43.26259×749 30.1 KB

Then set your arrow image width to 100%

CleanShot 2021-03-30 at 13.43.50
CleanShot 2021-03-30 at 13.43.50244×790 28.6 KB

Apply these 2 steps to your LEFT (align left)

DONE :wink:

3

Hi Stan! wow, so easy… thanks for the help!

4

Glad to help @Hessel_de_Ronde feel free to mark any response as solution to close this request