Menu icon Foundation
Headers for columns

I need to create a page that has a series of rows with a varied number of columns as sections of content. Within each content, I need to add a header that will be responsive whenever the columns themselves size up/down. Something like the following (ignore the slight overhand on the header - I don't want that - I want them the same size as the rest of the color sections below each header). I can't seem to figure out how to add these headers so that they stay "stuck" to the content below it and act responsively. Do I need to create these as individual "containers" - like cards - rather than just column styling? My grid is very vanilla right now (showing basic without using actual html). I've tried making the header portion a separate row, but then they stack separate from the content sections. I've tried adding an image at the top of the column but that creates another responsive styling dilemma. I seldom create rows within rows but am going to try that while I hope I get some guidance. Once I can make these headers "stick" to their content areas, I want to upgrade them to adding an image background, but I don't want to do that until I can make the layout stick. Thanks for any guidance. I use Foundation 5.

 

row

   small-4 column

   small-4 column

   small-4 column

end row

 

Layout Example

 

 

 

 

headercontainerslayoutFoundation 5

I need to create a page that has a series of rows with a varied number of columns as sections of content. Within each content, I need to add a header that will be responsive whenever the columns themselves size up/down. Something like the following (ignore the slight overhand on the header - I don't want that - I want them the same size as the rest of the color sections below each header). I can't seem to figure out how to add these headers so that they stay "stuck" to the content below it and act responsively. Do I need to create these as individual "containers" - like cards - rather than just column styling? My grid is very vanilla right now (showing basic without using actual html). I've tried making the header portion a separate row, but then they stack separate from the content sections. I've tried adding an image at the top of the column but that creates another responsive styling dilemma. I seldom create rows within rows but am going to try that while I hope I get some guidance. Once I can make these headers "stick" to their content areas, I want to upgrade them to adding an image background, but I don't want to do that until I can make the layout stick. Thanks for any guidance. I use Foundation 5.

 

row

   small-4 column

   small-4 column

   small-4 column

end row

 

Layout Example

 

 

 

 

Rafi Benkual almost 2 years ago

If you are looking to make each column the same height, equalizer can help you.

Otherwise, flexbox solves this too: https://codepen.io/rafibomb/pen/XVVxXV

Sherry Bradford almost 2 years ago

Thank you so much! I'm embarrassed to say that I haven't tried flex yet and this will be a great reason/push for me to dive in. Appreciate your guidance!!

Sherry Bradford almost 2 years ago

I got it to work with equalizer! It isn't perfect yet - but at least I have the basic and now I can figure out the nicer details (such as the gap between columns. Right now it is huge. :-) ) 

By any chance are the old Foundation 5 building blocks still available? I'm not able to upgrade to Foundation 6, unfortunately. I believe there was an old example in those building blocks that had this idea implemented.

I tried your flex codepin and it worked except that I can only get the row to shrink and not wrap so on mobile my content looks pretty awful. I tried putting the wrap selector into the css but it didn't make any difference. It looks like in some of the older forum posts that this is just the way flex works. But I can see where flex will be helpful for some of my content. 

Thank you again for your help!