I want people with older versions of Internet Explorer to still see pages on my site correctly, so I’m using the regular height, width, and display properties instead of flexbox properties (but function the same).
So I’m wondering how to make all of these inline-block elements to have the same height regardless of how much content is inside. Here is what it looks like:
Hey Josiah. Th same issue was actually discussed this a recent Webflow webinar. What I do personally is to set a defined with say 33.3333% for 1/3 columns; 50% percentage for halfwith columns.
A combination of align-self: stretch and direction: row is what spells doom for older IE browsers. So the trick is to build it first without flexbox (old way using floats; avoid columns altogether) then add flexbox properties after you are satisftied with the layout.
If you were to inspect the code, you would see the old float styles are there even though modern browser will somehow pick up on flex box. The former then acts as a fallback for older IE browsers.
Well that’s the problem: if you look at the blog page from my read-only link, you can see that the columns of the blog posts don’t respond to height by percent—they only change when I use pixels for its size.
For example, if I set the height to 620px, it will work, but if I set the height to 33.3%, it won’t change at all.
I think the dynamic list element that’s set to 1/3 columns may be interfering with this.