[Support request] Internet Explorer issues …

Home Forums Support Internet Explorer issues …

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1107493
    Cré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?

    #1108076
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1108488
    Cré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;
    }
    #1108526
    Créateur

    I tried to fix as mentioned here …

    I won’t work. 🙁

    #1109042
    Tom
    Lead Developer
    Lead Developer

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.