Follow

Page Layout Cell, Page Layout Column & Page Layout Row (Deprecated)

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).

For more flexible responsive behavior that works at both the page and Coach View levels, a Horizontal or Vertical layout control should be used with a Responsive Sensor.

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.

Configuration

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

Example

These are the configuration option settings...

This is the result at full page size...

And after when page is resized...

Related Article(s)

SPARK Layout Capabilities

 

  • Author: Courtney Silva
  • Date Created: June 23, 2015
  • Date Modified: March 23, 2017
Was this article helpful?
0 out of 0 found this helpful

Comments