Website looks different in different browsers

Hi there,

are you using the Dispatch Site?
If so then you can try this - go to Customizer > Additional CSS and look for this chunk of code:

@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        grid-column: 1 / 5;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        grid-column: 5 / 7;
        grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 7 / end;
        grid-row: 2 / 4;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .wpsp-grid .wp-show-posts article {
        grid-column: span 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-row: 3;
        grid-column: span 2;
    }
}

And replace it with:

@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
        display: -ms-grid;
        display: grid;
    }
}

@media (min-width: 900px) {
    .wpsp-grid .wp-show-posts {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr);
        -ms-grid-rows: 1fr auto;
        grid-template-rows: 1fr auto;
    }

    .wpsp-grid .wp-show-posts article:first-child {
        -ms-grid-column: 1;
        -ms-grid-column-span: 4;
        grid-column: 1 / 5;
        -ms-grid-row: 1;
        -ms-grid-row-span: 3;
        grid-row: 1 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(2) {
        grid-column: 5 / end;
        -ms-grid-row: 1;
        -ms-grid-row-span: 1;
        -ms-grid-column: 5;
        -ms-grid-column-span: 4;
        grid-row: 1 / 2;
    }

    .wpsp-grid .wp-show-posts article:nth-child(3) {
        -ms-grid-column: 5;
        -ms-grid-column-span: 2;
        grid-column: 5 / 7;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        grid-row: 2 / 4;
    }

    .wpsp-grid .wp-show-posts article:nth-child(4) {
        grid-column: 7 / end;
        -ms-grid-column: 7;
        -ms-grid-column-span: 2;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        grid-row: 2 / 4;
    }
}

Ignore the errors/warnings you see in the Customizer, just check the box to say all is ok - its simply because the WordPress CSS parser doesn't recognise CSS grid properties.

That fixed the problem. Thanks David!

Is there an optimal container width for Dispatch, or can I set it to 1200 without issue?

Glad to hear that - thanks for the reminder - was meant to update the CSS :)

No optimal size - 1200px wouldn't be a problem.

What is Dispatch Site? It looks like you just added ms prefixes to fix it?

Dispatch Site can be seen in the GeneratePress library:

https://generatepress.com/site-library/

Yes - i was being lazy and forgot to do the prefixes when writing the CSS lol

Ah, should have looked there. Just searched in the documentation.

Forgive the silly question, does WP work with something like https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ so we don't have to worry about manually adding prefixes?

No - the autoprefixer you would add to your IDE when writing your own CSS.