Girds displaying in single column on older iPad

I’m using some grids throughout my website, for example my client logos on the about page. I’ve set them up to display in 3 columns on desktop, 2 on tablet/landscape mobile and 1 on portrait mobile.

However on an iPad mini (original version, iOS 9, safari — too old to download chrome or firefox), they always show in one column left aligned, as per the attached screenshot. It also looks the same (single column) in landscape, which uses the desktop breakpoint, which makes me think it’s a device specific problem.

I’ve tested it on multiple devices, including a standard size iPad running iOS9, where it all displays as expected. I’ve used grids on other pages such as work and 36 days of type, where the problem is exactly the same.

I’d really appreciate any sort of workaround, as this is one of the few things stopping me from launching (I also reported a bug with the lightbox that nobody has been able to help with yet).

Read only: https://preview.webflow.com/preview/ellencovey?utm_medium=preview_link&utm_source=designer&utm_content=ellencovey&preview=b4ec73e55c82a57ea72d8dfa3da95d6b&pageId=5d6d4218d05eb9caa444bf5f&mode=preview

Published: https://preview.webflow.com/preview/ellencovey?utm_medium=preview_link&utm_source=designer&utm_content=ellencovey&preview=b4ec73e55c82a57ea72d8dfa3da95d6b&pageId=5d6d4218d05eb9caa444bf5f&mode=preview

You can consider as a general rule that CSS grid will probably not be supported on devices / browsers that haven’t been updated after 2017.

You can check that here : Can I use... Support tables for HTML5, CSS3, etc

CSS grid is amazing. Unfortunately… too many users out there still have old ipads or old mac with a 2015 safari browser with no proper support for css grid.

If you want to use grid nevertheless you could consider using some @support rules in your css.
Like so :

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}

More info here : @supports - CSS: Cascading Style Sheets | MDN

I hope that helps

Thanks, I don’t know why I assumed that other parts were displaying correctly that it was supported! I’ll add this to my list of things to fix along with Internet Explorer’s mess.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.