Breakpoint options when setting column visibility (e.g) within page builder are not reflective of the breakpoint settings defined in the work area. This article will review how to edit breakpoints in both places to keep them synchronized going forward.
Ektron has 2 different ways to define breakpoints. One set of breakpoints is defined in the Workarea at Settings > Configuration > Mobile Settings > View All Device Groups. Another set of breakpoints is defined in siteroot/Pagebuilder.config in the visibility option for column settings. They are different, but can cause confusion if you name them the same and have different breakpoint values.
A breakpoint is a screen width at which media queries make changes to the layout and switch from one image file to another. For example, you can set an breakpoint of 480 pixels-wide and call the group "Smart Phones," and set another breakpoint of 1024 pixels-wide and call the group "Tablets." If an image is loaded at 720 pixels-wide, the image is allowed on devices in the "Tablets" group.
The Workarea breakpoint settings determine scaling for the adaptive images feature is explained in http://documentation.ektron.com/cms400/v9.10/Reference/Web/EktronReferenceWeb.html#Mobile/Mobile.htm.
The PageBuilder responsive framework feature is explained in http://documentation.ektron.com/cms400/v9.10/Reference/Web/EktronReferenceWeb.html#PageBuilder/PageBuilder.htm.
To manage breakpoints displayed in PageBuilder's Resize Column window, modify the siteroot/PageBuilder.config file (partially shown). To enable, disable, or customize the pixel widths of the breakpoints in the framework of your choice:
- Compile a custom version of BootStrap ( http://getbootstrap.com/customize/).
- Open the siteroot/PageBuilder.config file.
- In the section's element, point to the location of your custom BootStrap version.
EnumVal="3" Label="Bootstrap3" Enabled="true" DropZoneOuterClass="container" DropZoneClass="row">