for Stacks 3
Reduced height on mobile using Flex "Auto Above Breakpoint" setting
On mobile the height of this image is controlled buy the Sections Padding and so can be whatever you like
A grummage 2 column stacks containing two 50% High Sections The columns and the Sections are all equalised height.
Auto overflow control prevents the content overspilling by reverting the section to normal height when required.
Sections Flex Height works with Flexifont (and Foundation Equalise height)
This section is set to 35% height. Again auto overflow protection is enabled.
As soon as this content becomes larger than the Section, the 35% height will be cancelled and it will revert to normal responsive behaviour.
In addition, the section padding will be restored that is cancelled in flex height centered mode. This ensures that the section padding can be controlled independently.
The great thing with sections is that when either overflowed or stacked for small screens the padding is re applied so your section looks great in all situations
Sections in a Foundation 3 column stack with equalised height
Each column contains a equalized height Sections stack with overflow control.
Sections content control and positioning works seamlessly with equalized height columns.
See below for details.
With Auto Content Overflow control all this is just one setting in the stack.
No complex layouts required and it works inside standard Foundation columns
Sections does not use absolute position to achieve its Flex Height behaviour.
This means that you do not need to use lots of stacks to have percentage height Sections in Foundation columns. Instead, content control becomes just a matter of dropping and equalised height Section stack into each Foundation column and setting their heights.
Because the Section content remains in the page flow (i.e. not absolutely positioned) then all the normal design methods work. For example, if you want the content to use the site max-width then just drop it in a Foundation 1-column or Grummage stack as normal.
With over flow control set to Auto or Auto Above Breakpoints you then still get normal Foundation equalized height behaviour. What is more, you can control the height below the breakpoint using Sections padding.
What this means is that you can have a 50% high section on tablet and desktop but allow it to collapse to the padded height for mobile, thus saving screen space. This is ideal for images or sections with little content - just like the 2-column sections at the top of this page.
For multi-column designs, you design using columns. Sounds simple, but Sections inside columns allow you to retain all the normal practices for content layout without over riding the default column behaviour.
You decide at which point Sections controls the height of an individual column - and when it reverts to normal behavior. By using Foundation's built equalize height functionality other columns will respect the size of the Flex Section column. When content is about to overflow, Sections reverts the column to normal behaviour and because Sections has its own adaptive padding, this is then re-applied to control the height of your content.
Because the way Sections handles content so seamlessly it is hard to see what it is doing.
There is, therefore, a page in this demo that highlights the Section content in green when is is in Sections Flex mode and removes the green color when content overflows and normal column behavior is resumed.
See the Flex Hightlight Demo by clicking here or via the menu on the left.