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).
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;
}
}
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.