Sections ProFlex Height

Sections Pro Flex Height controls allow you to scale sections proportionally to the browser or device size.

What makes Flex Height unique is the Content Control system incorporated into Sections Pro to allow you to easily layout proportional content without fear of it ever being cut off or clipping. Sections is the only stack that packs this punch and so you should learn how to use it in your designs.

The great thing about content control is that it is fully automatic. By default, it is turned on and in full auto mode, whenever you select a proportional height setting in the flex height controls

  There is a dedicated Content Control demonstration page to study in this project but all Sections on this page use it by default as well.

The most usual use of the proportional Flex Height control is in Proportional to Browser Height mode. Users of the original Sections stack will be familiar with this and find the setup is the same.

Sections Pro brings more control than its predecessor. You can now specify a different proportional height for smaller devices and have complete control over the responsive behaviour.

The Section at the top of this page is of course in 100% high mode to form a hero header.

You will notice though, that we have utilised the new Sections Animate child stacks to animate both the background image and the font awesome arrow in the Sections Fix stack.

By simply adding proportional height Sections into full width column stacks, you can easily form great layout models.

If you are already familiar with the existing Proportional to Height controls and Content Control, you can skip to the new Proportional to Width information on the Advanced Proportional Height page.

  REMEMBER: These layouts only work in practice with real content because Sections has active Content Control. Without it, any reasonable quantity of content would be cut off as the height of the browser is reduced.

Because Sections Pro has its own animate and Layer child stack you can add effects, videos and even other stacks to your proportionally sized sections. Impact works great as a Sections background and your foreground content benefits from the Content Control ability of sections.

Because Sections Pro has its own animate and Layer child stack you can add effects, videos and even other stacks to your proportionally sized sections. Impact works great as a Sections background and your foreground content benefits from the Content Control ability of sections.

Experiment with animating gradients. You can achieve some great subtle effects this way with very little page overhead.

  REMEMBER: The examples below are just to provide you with a starting point for various effects in the downloadable version of this project. They do not necessarily look good all together, use sparingly for subtle enhancement.

All the below effects are set to trigger on hover so that it is easy to see them on this page.