[Support request] Internet Explorer issues …

[webcréateur]

Hi there,

We are using Dispatch from site Library:
https://gpsites.co/dispatch/

On the Homepage we also use the same list with WP Show Posts Pro.
On modern browsers it looks fine like here:
https://prnt.sc/qcfw2l

But we have still a lot of clients using Internet Explorer.
The header list (WP Show Posts) is messed up in IE (tested in IE 11).

https://prnt.sc/qcfy73

Any chance to fix this?

[Tom]

Hi there,

That area of the site is using CSS Grid, which IE isn’t all that friendly with, unfortunately. We can prefix all of the CSS Grid stuff with IE prefixes, but it still doesn’t end up very pretty.

One thing to try:

1. Go to Customize > Additional CSS and find this CSS:

.wpsp-grid .wp-show-posts {
    display: grid;
}

2. Replace it with this:

.wpsp-grid .wp-show-posts {
    display: flex;
    display: grid;
}

[webcréateur]

Thank you.

I replaced the CSS, that’s the result in IE:
https://prnt.sc/qcwvjp

Any chance to fix this issue on IE for good?

here is the whole CSS from Dispatch:

@media (min-width: 600px) {
    .wpsp-grid .wp-show-posts {
          display: flex;
    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;
    }
}

.wpsp-grid article:not(:first-child) .wp-show-posts-image a img {
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.wpsp-grid article:first-child .wp-show-posts-image a img {
    height: 500px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

[webcréateur]

I tried to fix as mentioned here …

I won’t work. 🙁

[Tom]

I don’t think it’s possible to achieve the same result in IE as we get in other browsers, unfortunately. I’ve played with it using different vendor prefixes, and none of them truly fix it in a usable way. The fix I provided above definitely isn’t perfect, but it’s at least readable for people who are stuck using IE11.

[Author]

Posts