Columns Tablet Breakpoint Issue

Foundry
1

It doesn’t appear that the Tablet breakpoint will stack two columns when the Equal Height Columns is selected.

I was working on a layout and wanted two columns on desktop and one column on tablet and mobile. I was debating having the content vertically centered on desktop. If I have the mobile and tablet set to 12/12 and desktop set to 8/4, when the Equal Height Columns option is enabled, the two columns stack on mobile, are 50/50 split on tablet and 66/33 on desktop. Turning off the Equal Height Columns option causes the columns to stack on tablet.

Example project: https://www.dropbox.com/s/lvossphx80bgo06/Columns%20Issue.zip?dl=1

(edit to zip project file)

2

Hi there @DLH –

The equal height feature does not allow for stacking. This is a tradeoff for using the equal height columns. Your 12 unit columns at the tablet breakpoint will not work because of this, and it is why it is being translated into two 50% (or 6 unit) columns. What we do to preserve the readability of the content is to totally disable the equal height features at the mobile breakpoint, while retaining them at the Desktop and Tablet breakpoints.

Just setup a test here and it seems to be working as it should: http://d.pr/v/mqIXAG

So I opened up your project file and turned on Equal Height columns and it too seems to be working as it should: http://d.pr/v/tnSsQf

Hopefully this demystifies how it works a bit.

3

Thanks for the explanation. At least I now understand what’s going on.

Instead of disabling the equal height feature based on mobile, could you disable it for any size (mobile, tablet, desktop) if any column for that size is set to full width (12 units)?

This would allow more flexibility.

1 Like
4

That’s a better way to do it and add flexibility.

5

While that sounds easy enough when described, I believe it would be much more complex than it seems, and I am not sure it would work with the way the stack is coded. There are a few stacks that get used a lot within Foundry and the Columns stack is one of them. It is already a pretty complex stack, both in Edit Mode and when published. I’m not sure if complicating it more for this is a priority for me. I will note the feature request and take a look at it when I get a chance, but I can’t make any promises on this one as being something I’ll choose to incorporate into the Columns stack.

1 Like