Learn Sections Pro

Sections Pro Content control is a unique feature that prevents your content from being clipped or overflowing when using proportional heights.

Normal responsive height containers size themselves to your content (text, headers images etc). No matter what size your screen is, you never loose content.

With proportional height containers (those set to a percentage of the browser or parent height), the height is determined by the container and not the content. Thus is the content becomes taller than the container, for example on a landscape iPhone screen, then content will either overflow or be clipped at the boundary of the container.

You can see a live example below on this page but in essence the concept is very simple.

If Sections detects that your content is about to become larger than the bounds of the Section, it will automatically cancel the proportional flex height and revert to normal responsive height, dictated by the size of the content and any padding that you have applied.

This is seamless and will never be noticed. In fact, in order that you can see it in action, the demonstration below has some special CSS added to make the content text yellow when Sections content control becomes active. This is the only way you would ever know what was happening behind the scenes and for visitors to your site it is totally inconspicuous.

If you are using multi-column proportional layouts, you will still need to enable equalize height (Foundation only) if you want the content to be equalised when content control reverts to normal height mode for overflowing content.

Sections does not use absolute position to achieve its Flex Height behaviour and content centering.

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 talso 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.

If you are using vertical centering then Sections Pro will automatically remove the Section padding that you have in the settings. In Flex Height mode with vertical center it is not needed.

However, your padding settings are important. If the content is about to overflow and Sections content control reverts the Section to normal height then your chosen padding is immediately re-applied. Perfect control in any layout and set up just as you would set up any other container stack.

  REMEMBER: The examples page has some CSS added to turn the text yellow when content control detects an overflow and reverts to normal height. This is purely so that you can see it in action.