Support » Plugin: Atomic Blocks - Gutenberg Blocks Collection » AB Post Grid looking awfully in IE

  • Resolved henriette123

    (@henriette123)


    Hi, i am using the AB Post Grid with 3 columns for our magazine site (theme Editor Blocks) and all looks great, except that on IE the grid shows up with just one huge column… Also the Post List (grid with list view) looks awful: the (square) thumbnail displays over the whole width and the post titel and excerpt are displayed below the image. I already tried deactivating all plugins by AB, but the problem persists. Anyone experienced the same and found a solution? Any help would be really very much appreciated!

    • This topic was modified 4 months, 1 week ago by  henriette123.
    • This topic was modified 4 months, 1 week ago by  henriette123.
    • This topic was modified 4 months, 1 week ago by  henriette123.

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author John Parris

    (@mindctrl)

    Hi @henriette123, which version of IE are you using? Can you send screenshots of what you’re seeing?

    IE 10 & 11 only work with version 1.0 of the CSS Grid spec and it’s a partial implementation at that. When coding CSS grid for IE, you have to pre-fix grid specifiers with the MIcrosoft versioning -ms-grid. The early grid specification can only use the column, row, span syntax. For IE !0+, you should also wrap MS Specific grid code in this media query wrapper that only executes for IE 10+. Earlier versions of IE do not support the grid spec.

    /* IE 10+ CSS Grid and browser specific styles */
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    
    }

    Here’s an example of CSS grid for IE 10+ browsers:

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
    
        .site-header .wrap {
            display: -ms-grid;
            -ms-grid-columns: minmax(1rem, 200px) 1fr minmax(1rem, 200px);
            -ms-grid-column-align: center;
            -ms-grid-row-align: start;
        }
    
        .header-image .title-area {
            -ms-grid-row: 1;
            -ms-grid-column: 1;
            -ms-grid-row-span: 2;
        }
    
        .locations {
            -ms-grid-column: 2;
            -ms-grid-row: 1;
            -ms-grid-row-align: end;
        }
    }
    • This reply was modified 3 months, 3 weeks ago by  Victor Font.

    Hello Victor, thank you for these explanations! And also thanks to John Parris for his reply, to which I apologise for not answering earlier because I am only an occasional web builder and not a frequent visitor of wordpress.org, and also because I tested my site through SmartBear Cross Browser testing with a free account which expired after a few days. The problematic browsers however, were exactly IE 10 & 11.

    So what Victor says, makes a lot of sense. I believe that these techniques should by implemented directly in the AB plugin builders and (@John:) I hope that in the near future this issue will be resolved in a new release! (In fact I find it a bit strange that the AB post grid block wasn’t already cross browser tested in the first place, including in IE 10 & 11.)

    Plugin Author John Parris

    (@mindctrl)

    Thanks, we have this on our list to tackle soon, hopefully in an update next week.

    Plugin Author John Parris

    (@mindctrl)

    We updated to support MS grid in the latest 1.6.1 update. Let us know if you see any other issues.

    Hi John,

    We are seeing issues still with the 1.6.1 AB Post and Page Grid block on Internet Explorer.

    URL: https://www.veteransstatebenefits.com (the Read All About It section of this homepage)

    When will this be fixed please? In the meantime, is there something we can do to fix this?

    Thank you very much!

    Plugin Author atomicblocks

    (@atomicblocks)

    Hi Marcus,

    Which IE are you looking at? This will help us test it further.

    I don’t know. We are a MacBook shop.

    It was reported to us by a visitor using a computer in a library so I imagine something old.

    I can send you a jpg photo of the problem if you provide me a email address.

    The problem is the same as reported originally by @henriette123

    The grid appears as one column (one scrambled Post) instead of two columns displaying 6 posts.

    Plugin Author atomicblocks

    (@atomicblocks)

    Hi Marcus,

    Microsoft doesn’t support anything lower than Internet Explorer 11, and we’ve tested for that with success. CSS Grid also has partial support for IE 10 for users who are still on that, but unfortunately we can’t support anything that Microsoft doesn’t support.

    Thanks John!

    So I am assuming that this was indeed corrected in 1.6.1 for version 11?

    Plugin Author atomicblocks

    (@atomicblocks)

    Yep, that’s correct. We added the necessary -ms prefixes to the grid to ensure it looks good in modern IE browsers.

    Plugin Author atomicblocks

    (@atomicblocks)

    Hey folks,

    We just released another update to Atomic Blocks with some additional fixes for the grid in IE11. Thanks for your patience!

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