Learn Sections Pro

In most cases you should use the Proportional To Section Width setting rather than Proportional to Browser Width. The set up is a lot simpler.

The example on this page though does offer the advantage of full content control. Proportional to Section Width is better suited to less content and image based layouts.

Sections Pro Flex Height settings include a mode that scales the height of a Section proportional to the width of the browser or device.

At first this seems counter intuitive but it is really very similar to the way that many conventional elements scale. Images for example exhibit this behaviour by default. So what use would a container be that scales in this way?

In reality much of Sections code has already scaled in this manner since the very first version 1 release. This is the magic behind angles and connectors. Have you noticed the way that a connector will follow the angle of a Section if you move it left and right? This is probably just taken for granted but it is a non trivial task in a browser when just using CSS.

The magic happens because of the basic proportional relationship between the angle, the width and a man named Pythagorus. You don't need to know any of this to use Sections, that is the joy of its automatic settings. All you need to understand is how we can use width proportionality to construct unique and functional layouts in responsive web pages.

  PREFACE:

The following all refers to proportional height elements where content control is necessary. It is very simple to produce a proportional layout such as the following where the only content is background images.

Sections Pro deals with real designs with real content and tackles the issue of content getting cropped or cut off for landscape orientation devices and the like.

Resize your browser with and watch the column content. When the content is about to overflow and crop, Sections Content Control will activate and revert the columns to equalised height with normal padding.

For the purposes of this demo, some CSS has been added to turn the text red just so that you can see when it is happening.

More complex layouts like this do take a bit more thought. The main issue is to understand how equalized columns work. Remember that for the Sections background color to span the height of a column, that Section must be equalised.