MAXIMUM HEIGHT

Maximum Height is used most often used to make columns have an equal height. Though, it is also used to make a Child Frame expand to the full height of the frame.

EQUAL HEIGHT COLUMNS

To make your columns have equal height:

  1. Set the Child Columns to 'Full Frame'.
  2. In the Parent Frame, notice the 'Equal Height Columns' tools. Set this to 'On'.


Many designers like to set a 'Fixed Height' to make all columns equal height. This is a nice technique, however, if your content team add a lot of text to the column, then the text will 'Overflow' the Fixed Height, or be 'Hidden' behind it. Rather than setting a Fixed Height, consider using a 'Minimum Height' with 'Maximum Height.' This way your design will always work, irrespective as to how much content is added in the future. 

  D03 E03    09:46

Equal Height Columns

Equal Height Columns extends all Columns the the Height of the the tallest Columns. This technique tends to be an edge case, since many designers prefer to use Widgets which does it all for you automatically. Though, it's worth learning even if your website doesn't require Columns with equal Heights, since in this Episode we also intro Maximum Height for the first time, which we'll use more and more in the ongoing YouTube classes that follow this series.

MAXIMUM HEIGHT - CHILD FRAME

It's often nice to allow a Child Frame to extent to the Full Height of the Parent. 

  1. Set the Child Columns to 'Full Frame'.
  2. Ensure the Parent frame has a 'Fixed Height'

DESIGNER TIPS:

ONE
Default Settings
MOBLE CMS comes with many pre-formatted Layouts. In most Layouts, you will notice that, by default, our Child Columns have 'Maximum Height' set to 'Full Frame'. This ensures both heights aligned perfectly, no matter how much content is added inside the Child Frame. If you have complicated Child Columns, e.g. with Effects, and your columns don't seem to align, set the two innermost Child Frames have are both set to 'Full Frame'.

TWO
Please note that Maximum Height can not be viewed in Design Mode.
This is because Design Mode must display Grids in their true form. Flip to Business Mode to view your changes, or View/Preview your page in a new Tab.