The Page Layout Cell, Page Layout Column, and Page Layout Row are section controls that are useful for organizing content and for achieving responsive Coaches. These section controls are meant to hold other controls within them. Note: 1) these controls function best when put directly on a page; 2) For better responsive behavior in all situations use Vertical/Horizontal Layouts with a Responsive Sensor.
These section controls are meant to hold other controls within them.
These controls are based heavily on Bootstrap CSS for responsive behavior, Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Of all the controls that manage layout/layout responsiveness, these are the least flexible, as they are all based on CSS media queries, which mainly account for the width of a page. As such, they should not be used inside of reusable Coach Views (and should only be used at the Coach page level).
It should also be noted that a Cell must be nested inside either a Page Layout Row or Column in order for responsive functionality to work.
For Page Layout Cell
Width When in Row Width when laid out horizontally (12 total columns in page)
Width When Stacked Width when laid out vertically (12 total columns in page)
Hidden On Extra Small Devices Hidden On Devices < 768px wide (phones)
Hidden On Small Devices Hidden On Devices >= 768px wide (tablets)
Hidden On Medium Devices Hidden On Devices >= 992px wide (desktops)
Hidden On Large Devices Hidden On Devices >= 1200px wide (desktops w/ wide screen)
For Page Layout Column and Row
Incremental Layout Layout the content of the section so both the left and right margins are flush with the border of the containing section
These are the configuration option settings...
This is the result at full page size...
And after when page is resized...
- Author: Courtney Silva
- Date Created: June 23, 2015
- Date Modified: March 23, 2017