Hi, I’m having some trouble with the Foundation 4 Column stack. The issue is not a problem with the stack itself…it’s because I’m still learning how to use Foundation properly. There’s probably a very simple fix for it, but I can’t figure out how to do it.
I have a 4 Column stack on this page: http://digitalbuzz.ca/home2/ (scroll down to the white section…where it says “CIMC is your chance to get ahead.”)
The four columns look great on desktop (3 units/3 units/3 units/3 units), but I want it to change to 2x2 on tablet (like how Joe’s previous 4 Responsive Column stack used to work). For the tablet sizing set up, I’ve got 6 units/6units/6units/6units. And when you resize the browser, the columns rearrange themselves…but the content in the first column seems to push the content in the third column over, so instead of 2x2, you get 2 columns in the first row, 1 column in the second row, and 1 column in the third row.
How do I make the Foundation 4 Column stack go to 2x2 on tablet?