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
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Grid is only partially supported in IE11.
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.
Thanks @vincent, I’ll try that.
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
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.
http://vincent.polenordstudio.fr/snap/screencast_2018-11-28_17-26-07.mp4
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
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.
That’s good to know and very helpful. Thanks @vincent
