Setting the minimum height of a section

Running Time: 00m 31s

 

This video gives a brief introduction on how to set the minimum height of a section.  More detailed instructions can be found below.

NB Click on Image in the bottom right of the video to view fullscreen.

An Introduction to Section Minimum Height

The Section Minimum Height property defines the minimum height of a section.  If the content is smaller than the minimum height, the minimum height will be applied.  If the content is larger than the minimum height, the minimum height property has no effect. 

 

Bear in mind that cells with text get taller at narrower screen sizes (the text flow grows longer as there is less available width), so whether the minimum height is applied might depend on the screen size. In general this means your minimum height is usually required more for the large screen sizes than small screen sizes.

 

There are four options available:

Section Minimum Height - None

The height of the section (in this case indicated by the image of pebbles) is determined entirely by padding applied to it and/or by the height of cells (in this case with the green background) it contains.


Section Minimum Height - Match Viewport Height 

The height of the section (in this case indicated by the image of pebbles) matches the height of the browser window, even if the content is smaller than the height of the viewport


Section Minimum Height - Minimum Aspect Ratio 30%

 

The height of the section (indicated by the image of pebbles) is given a percentage value of it's width.  In this instance the section height is 30% of it's width at all screen sizes (adjust your browser window to observe this in action). However as it is a 'minimum' aspect ratio, if the content of the cells was taller that this minimum, the section would grow accordingly


Section Minimum Height - Minimum Height 500px

The minimum height of the section is given a fixed value in pixels.  In this case it has been set to 500px and this value remains constant regardless of the screen size.  Resize your browser window to observe this.


Section Minimum Height 300px with a cell greater than that value

Notice how the section height expands beyond its minimum height of 300px to accommodate the taller cell, plus the section padding

Image