Row of boxes. Height is RESPONSIVE. How to make all equal height, or align the tops?
In the center of this page: http://easydigging.com/Garden_Tool/home2.html you will see a collection of bordered boxes that display our different product categories.
The page is responsive, so the boxes narrow and the height changes continously to fit the text as you alter your screen width. There are 4 boxes per row on desktop displays, 3 boxes per row on tablets, 2 boxes per row on large phones, and 1 box per row for small phones.
*You can pull the side of your display from wide to narrow to see the effect in real-time.
The problem is that they look weird at certain screen widths - since the bottom edges are aligned and the box height varies a little to fit the text at different screen widths. So at some screen widths all the boxes are the same height and they look nice (like a row of playing cards), but at other screen widths they are not all the same height and the top edge looks jagged (like a city skyline or a mountain range)
My first choice would be for all the boxes to be the same height as the TALLEST box (so they look like deck of equal sized cards - but remember that the height varies as the screen width changes)
My second choice would be for the TOP EDGE to align instead of the bottom (the bottom edge would be jagged, but that is OK)
I can't figure out how to do either of these :blush: If you have ideas, please share them...:)