Issues with Safari displaying website differently

Hi everyone,

I’m having issues with the compatibility of my site, specifically with a some margins, as well as a few interactions.

On my main page at the bottom, the sponsors section has had to be pushed way up with tons of extra padding as in Safari the thumbnails below end up overflowing into the footer, however in the designer and on other browsers this doesn’t happen.

Furthermore, the hover interactions in the Schedule section don’t work in Safari either.

I’m really confused as to why this is only happening on Safari and the other browsers work just fine. Is Safari particularly finicky with these sorts of things?

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/edwards-blank-site-143218?utm_medium=preview_link&utm_source=designer&utm_content=edwards-blank-site-143218&preview=7ea4f60bcabe539ebd89bdce358a19d3&pageId=5ed917fc7f50a071fcef51e1&mode=preview

@Edward_Powell - can you post your live site rather than the read-only to troubleshoot this issue?

Unfortunately I can’t give the live site as I’m not ready to publish yet. However these problems still occur within the live preview, so I’m guessing they’re also going to happen when the site is published. Thanks

@Edward_Powell - I think one of your issues may be setting heights on sections. For instance on your sponsors section you have a height of 65vh set on the section itself and many of the elements inside have set heights as well. This can cause issues and is usually unnecessary - letting the content flow naturally based on it’s size versus trying to fit it into a box vertically is my recommendation. Control spacing with margin and padding instead.

For instance you have heights on all of these nested elements:

All of those could be removed and you could control things much more simply in a way that will adapt to the content.

For instance you can control all of your spacing for the slider on this element:

image

You could put a max width on your sponsor logo container:

image

And remove the height from your overall slider container:

This is going to simplify layout for you significantly. I would strongly recommend getting away from all of the set heights on every element.

Hi @sam-g, thanks for your comments.
They’re very useful, however after applying the changes you mentioned, I’m still having the same problem of the entire Sponsors section being pushed too far down on Safari.

I’ve combed through all the elements removing redundant settings for height/width and setting as many as I can to Auto, but the same issue still arises, so I’m quite stumped.

As per setting heights on every element: in general my intention for setting so many heights was to try and make things a bit more responsive, especially for when I start to adapt the site for mobile, but I guess that’s not the best option (this is the first website I’ve ever built, so I’m fumbling a bit here). What would be the best practice for making the elements in responsive in these cases? Just adjust layouts at breakpoints, or is there something more to it?

Thanks so much again!