Last Updated: September 09, 2019
·
3.222K
· avgp

Foundation: Small grid vs. large grid

The foundation docs suggest using "small-x columns" when your small-screen and large-screen grid is the same.

The problem is, that this can actually break the layout on small screens, for example when you put a button in a small column, like this:

If you want to see this problem in action, open this fiddle and resize the browser window to be as narrow as possible and you will see this problem.

The solution to this is as easy as just switching to "large-x columns" instead, like in this fiddle.