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?
Hey Garth, that is a crazy one. Wondering if you could try taking out the True Retina stack by DooBox and just use a standard Foundation image stack. That way works fine for me as you can see here: http://www.zeebedesigns.com/4-column-test/
Wondering if you have all the settings set to 6 for the tablet setting as well, that might be the issue, maybe they are 7 or 8 or something. Just ideas to check.
Hi @zeebe, thanks for the reply. It seems to happen when the content of one column is taller than the other columns. In your example, all of the images are the same size, so there is no issue. On mine, the text in the first column is longer than the text in the other columns, which makes Column #1 too tall…and it seems to force Column #3 to move to the right. I checked all my settings and they were all set to 6.
Another user (Ricinport) suggested that I put two 2 Column stacks inside a 2 Column stack. This worked fine.
I was just hoping that there would be a way to use a 4 Column stack with content of different heights, much like Joe’s other Responsive 4 Column stack.
@garth
Set more lines of text, so that everything will be the same length. This works quite well.
But with the 2 column stacks it works fine now, I have seen.
Very nice website, made perfect.
