[Resolved] Website looks different in different browsers

[James]

I’ve just uploaded my site to browsershots.org and tried it on ie. It looks totally different on different browsers.

On most (like 90% of then, the magazine header layout is not in grid format, but stacked on top of each other and too wide so the images look mildly distorted.

How can I fix this?

[David]

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.

[James]

That fixed the problem. Thanks David!

[James]

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

[David]

Glad to hear that – thanks for the reminder – was meant to update the CSS 🙂

No optimal size – 1200px wouldn’t be a problem.

[Wacey]

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

[David]

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

[Wacey]

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?

[David]

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

[Author]

Posts