Website not displaying correctly on IE and Safari

For the IE issue, add this CSS:

@media (min-width: 769px) {
    .page-hero {
        height: 100vh;
    }
}

For the Safari issue, it looks like it's getting mixed up because the navigation is floating to the right.

What if you set it to display above the header instead?

Great, the headings, nav and logo seem to have fixed for IE, but the vector clouds img i used in the header element still is not showing up for IE.

Hi there,

can you try giving the SVG a height property in your CSS, and see if it works on IE.

Seems to be displaying in IE now, however, i can't get it to go to full size across the header, I've tried giving the SVG 100% width but that only seems to center it.

Try a min-height property instead, not sure if IE will handle that but worth a shot.

Doesn't appear IE can handle it, and if i try the display messes up for the other browsers, I can see why people hate IE so much.

IE doesn't handle scaling well for SVGs, if you're really want to get into it this article provides some workarounds.

https://codepen.io/tomByrer/pen/qEBbzw?editors=110

If you want to add IE specific CSS then you can using his query:

https://docs.generatepress.com/article/responsive-display/#ie10-specific-styles

Thanks David!

You're welcome