Columns in Foundry


Could somebody please explain to me how in Foundry, using the Foundry Columns stack, you can make sure you get two columns at the desktop screen size, but only one column (or no columns) at the tablet size?

The tablet custom column size for the second column is at least 1 unit, so never zero. As a result , I always still get two columns - in the latter case with the widths of respectively 12 and 1.



Might have a look here, there is a video and documentation on it.

Check out the

Tablet Custom Columns

The following options are available to you when you enable the Customize Columns feature in the General section of the Columns stack’s settings.


As @teefers points out I’ve got a tutorial video that will walk you through using the Custom Columns feature of the stack, among other things. Basically though you want to set the columns at the Tablet breakpoint to both take up the full width, which is 12 units.

In the screenshot above you’ll see that our Desktop breakpoint is set so that column 1 and column 2 are set to 6 units (out of a total 12 units). This we’ll get two columns side-by-side.

In the Tablet section we’ve got column 1 and column 2 set to a full 12 units each. This means only one column will fit on a “row” at a time. Hence stacking them one on top on another.

Honestly, it is way easier than I make it sound in my long drawn own text above.

I encourage you to watch the tutorial video. It is far more interesting than me typing it all out here in a forum post. :laughing:


Dear @teefers and @Elixir,

Thank you so much: The issue is that I did actually watch that 12 minute video before coming to this forum for help AND that I actually have set the custom tablet columns 1one and two at 12 points width…

Yet, it still makes two columns on the iPad…

Two columns

What am I missing?

How do you turn your iPad?

Either way, it gives me two columns.

Depending on the screen size you’ll get the desktop breakpoint. Remember it isn’t device centric — it is based off of the width at any given time. Design with width in mind not an arbitrary device name.

Also Apple has now made iPadOS specifically mimic desktop.

I understand it’s the screen size, not the device. It is a really tiny screen though: an iPad mini. Tablets do not come much smaller than this. So you reckon it’s the desktop mimic thing?

I’m out of the office for the day. Provide us a download link for your project file and myself or someone else here will look at it.

Even The original iPad mini’s had a Logical Resolution of 768 x 1024 px. The screen looks small but Logical Resolution is the same as a regular(not pro) iPad, so the breakpoints would work the same.

1 Like

OK gents, thans again. This is the link:
The code is 101010.

Did you check the box Cutomize Columns?

1 Like

Unchecking ‘Equal Height Columns’ makes the columns behave correctly. @Elixir will have to give us more insight into how it should work with that setting enabled.

I noticed you are using the Container stack to add margins. The only reason to use that stack is if you want to set a max-width for it’s content. For margins, you’re better off using the Margins stack. It also gives you the ability to set margins by breakpoint.

1 Like

Also worth noting that many Tablets specifically request the desktop site. This is set in the device’s Settings.

1 Like

Yes I did. Thanks.

YES! You are right. I unchecked the ‘Equal Heights Columns’ and voilà, problem solved. Thanks a bunch!

I believe in Foundry v2.x at some point I made this feature work on multiple lines. Essentially it turns off the equal height setting after a certain point. I’d have to go back and look at my release notes again. I suspect @Jimmy that you’re using an older version of Foundry.

1 Like

Upgraded to Foundry v2. Love it! Thanks for all your support.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.