I tried to search for this but it was only pulling up videos that are outdated.
I’m trying to figure out how to make my columns always display as the same height, this is an issue bc they each hold paragraphs of text which are obviously not exactly equal.
I tried to set the height of the divs within the columns to be 100%, but that didn’t change anything. A set pixel height would have to be adjusted at each breaking point and even then it didn’t work smoothly. Ideas?
When asking for help in the forums, please share your projects read-only link. If the problem is on the published side, also share the published site link.
Hey there, for the layout you have (row of 3 elements, then 2 rows with 2 elements each), it’s a lot easier to just use grid instead of a column system. Make it a 6 col x 3 row grid then add your div boxes inside and arrange them according to what you envisioned. You won’t have any alignment problems. It’s a bit tricky to achieve the same result with columns and flexbox, you’re better off using grid here.
I’ve messed a little with the grid system but I ran into an issue with responsive design. Right now, using columns, on a mobile screen the 3, 2, 2, columns become a line of single columns. I couldn’t make that work with the grid option. I haven’t tried that in a while so maybe I’m wrong, but is that possible?
Yes it is possible. You may want to review the guides in the University.
If flexing, a method you can use is to place your variable height content (the text for example) into a new div with a class and give it a minimum height that is greater than your tallest element. You can remove that for stacked (mobile).
