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
To demonstrate content control with flex height, Sections content is highlighted green when in flex height mode.
As soon as the content control detects an overflow, that section reverts to 100% content height + any defined padding. At this point the green background is removed.
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.
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
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