Streaming live at 10am (PST)

Grid displaying as one column in IE11


#1

Hi

I’m seeing weird grid display behaviour in IE11 on this page

https://www.simplyadverse.co.uk/lp3/bankruptcy-mortgage.

The grid is the table in the section titled: How Soon After Bankruptcy Or An IVA Can I Get A Mortgage?

It’s a 6 column x 3 row grid but in IE11 it’s displaying as 1 column…

If anyone can help me fix this I’d be very grateful. Thank you.

Here’s my share link

https://preview.webflow.com/preview/simplyadverse-website?utm_source=simplyadverse-website&preview=aaa8b347e22972176c3e4c02c8608f61


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Grid is only partially supported in IE11.

https://caniuse.com/#feat=css-grid

To design such a table, you don’t need grid at all.

div for the table with flexbox vertical, 3 divs for the rows with flexbox horizontal, 6 divs in each of those 3 divs for the cells.


#3

Thanks @vincent, I’ll try that.


#4

Hi @vincent

So I’ve added a second version using flexbox directly underneath the original. The only issue is the text wrapping on mobile which is pushing the table borders out of alignment. See mob portrait etc. Any ideas how I fix this please.

Thanks a lot.

Graham


#5

Many solutions for that but look how I applied min height to the cells, and also finally used VW as a unit for the text so that when the viewport shrinks, the text does to.


#6

Hi @vincent

Thank you for taking the trouble to post that. Really useful and got it displaying correctly on mob portrait now. Not used vw before so I’ve learnt something too!

Cheers,

Graham


#7

It’s a lesser known unit. Goes along with vh, % of the height of the viewport. 100vh is actually the most easiest way to make something full screen. Easier to use than 100% height, which has some prerequisites.


#8

That’s good to know and very helpful. Thanks @vincent