Menu icon Foundation
Shuffling nested grids mid-breakpoint?

For 98% of all our page layouts the responsive grid breakpoints are working perfectly for our content, except for our footer which consists of 3 vertical columns of links. About 2/3 the way in the medium size the text starts to break into line wraps and the columns basically double in length.

I'm trying to figure out if there is a way in Foundation to introduce a custom element-specific breakpoint that would effectively split the medium range into 2, without having to redo the settings or global styles to introduce another range. Small, Medium and Large work perfectly for everything else but this one condition.

Any suggestions?

(btw if the folks who build these forums are reading this, I nearly delete every post I make because that delete button is right where the submit button usually is.)

nested gridscustom individual breakpoint

For 98% of all our page layouts the responsive grid breakpoints are working perfectly for our content, except for our footer which consists of 3 vertical columns of links. About 2/3 the way in the medium size the text starts to break into line wraps and the columns basically double in length.

I'm trying to figure out if there is a way in Foundation to introduce a custom element-specific breakpoint that would effectively split the medium range into 2, without having to redo the settings or global styles to introduce another range. Small, Medium and Large work perfectly for everything else but this one condition.

Any suggestions?

(btw if the folks who build these forums are reading this, I nearly delete every post I make because that delete button is right where the submit button usually is.)

Malou Geurts over 5 years ago

You could add your own media queries and give extra classes to the elements that need to be affected by those queries. That way you can keep your globals, you just give those columns an extra option.

Karl Ward over 5 years ago

If you break 3 columns into 2 on medium, that would mean you have 2 columns at the top and 1 below it ... Not sure how that would be a smooth solution ...

It can be achieved though with nested columns. You can set up 2 columns initially, first one large-8 second one large-4. Inside the first column, create 2 nested columns medium-6 and medium-6. On large screens, it will look like you got 3 columns. On medium screens, the 2 main columns will break, but the top one will still keep the 2 medium-6 columns in tact.

However, why not just use large- instead of medium- for your footer columns? If the content gets ugly, then having earlier breakpoints is fine ... Small devices are meant for scrolling vertically and its fine to stack stuff vertically ... Why complicate things?