CHOOSE FROM 40 FREE DESIGNS
SUBMIT YOUR OWN DESIGN & RECEIVE AN UNCAPPED 40% PER MONTH ROYALTY
Select your free website design, then completely make it your own with our easy to use website builder and CMS.
REPUTATION EDGE
FIXED HEIGHT
Fixed Height allows you to fix the exact height of your frame. Use Fixed Height, rather than Minimum Height, when you do not wish for your Frame Height to expand as more content is added within it. E.g. Columns and Grids. Fixed Height is also used when your Frame is intended to become a Parent Frame, with a Child Frame inside it.
FIXED HEIGHT INSTEAD OF MINIMUM HEIGHT:
Both Fixed Height and Minimum Height Fixed the Height of a Frame. You might wish to do this on a set of Columns, or in a Grid where you would like the Columns Heights to be flush.
If you set Minimum Height and the content exceeds the height, then the Frame Height will keep growing. If you set Fixed Height then the frame height will remain Fixed, and content will Overflow the frame.
OVERFLOW:
If content Overflows the Frame you have 3 options to control the overflow:
- Visible: Content is not clipped and therefore overflows into the frame below.
- Hidden: Content is clipped and therefore the content that overflows will not be seen.
- Scroll: Content is clipped and a scroll bar is added so that the rest of the content can be seen.
PARENT + CHILD HEIGHT
A good example of Parent Frames is when you have a Column or a Grid with Text on Top of a Background Image. In this case you'll want to have a Parent and Child relationship:
PARENT: The Parent Frame has a Fixed Height with a Background Image.
CHILD: The Child Frame includes Text. You can control the Height of the Child Frame with the Child Height. Consider giving the Frame and Background Colour or Overlay.
Since the Child Height is a % height, the Parent must always have known Fixed Height, this minimum Height can not be used.
By Default, when you add a Child Height, this will be set to Desktop Only, meaning it will not apply to Mobile. This is the default behaviour since a Mobile is a smaller screen than Desktop, and therefore the Child elements most often will fill the screen, and therefore no height is required.
However in some cases, the Child elements on Mobile do not fill the screen, e.g. Title Bars. In which case, you can set Fixed Height Devices to 'All Devices' to ensure you Height will also display.
TROUBLESHOOTING:
If your Parent Fixed Height does not show on Mobile:
Click on the Parent Frame and set Fixed Height Devices to 'All Devices'.
If your Child Frame does not align on Mobile:
Click on the Child Frame and set Child Height Devices to 'All Devices'.
ABSOLUTE + RELATIVE HEIGHT
A good example of Parent Frames is when you have a Column or a Grid with Text on Top of a Background Image. In this case you'll want to have a Parent and Child relationship:
PARENT: The Parent Frame has a Fixed Height with a Background Image.
CHILD: The Child Frame includes Text. You can control the Height of the Child Frame with the Child Height. Consider giving the Frame and Background Colour or Overlay.
Since the Child Height is a % height, the Parent must always have known Fixed Height, this minimum Height can not be used.
Another option that Frontend Developers use for this Parent and Child relationship is what we call 'Absolute' and 'Relative'. Where it can be said that "the position of Child Frame becomes 'Absolute', 'Relative' to the Parent Frame".
ABSOLUTE (CHILD): The Child Frame set's the Position. We therefore select 'Absolute' plus we also set the Position e.g. 'Bottom-Left'.
RELATIVE (PARENT): The Parent Frame is the frame that the Child is 'relevant' to. Think of it like the anchor that the Child is connected to. So therefore, the position that you set for the Child is relative to the position of Parent.
TROUBLESHOOTING
Sometimes when using Position, you might notice that the width of your Child Frame does not expand to the Full Width. This might be caused be a conflict elsewhere. If this happens, go to the ADV (Advanced) Tab and in the Class box add the class: max-width
