The Lesson Editor is fully web responsive without requiring additional coding, ensuring your content is responsive on any device size! C4EBridge accounts for responsiveness in large (i.e., desktop computer), medium (iPads or tablets), and small (iPhones or smartphones) devices.

Your lesson layouts in C4EBridge are responsive with regard to the following factors and settings:

• Visibility: By default, modules are visible for all device sizes. You can customize visibility so that specific rows, columns, and tool modules can be hidden for certain device sizes.
• Spacing: By default, the system automatically resizes row/column/tool module padding and margins for smaller devices. You can customize to define padding and margins for specific device sizes or disable the automatic spacing feature.
• Stacking: This refers to how tool modules and columns are ordered at various display sizes. This can be controlled by defining custom column widths for specific device sizes.
• Breakpoints: This refers to the screen-width values (in pixels) for each device size, which can be adjusted if you want different behavior for different device sizes.
• Per-device settings: Some settings in rows, columns, or tool modules can be adjusted individually, as indicated by the responsive setting icon. For example, the Typography section of the settings panel typically allows for responsive editing, as indicated by the device icon to the left of the menu options:

  

You can also further customize your lesson pages and layouts using the RESPONSIVE EDITING option on the Lesson Editor.

The RESPONSIVE EDITING option on the File menu of the Lesson Editor allows you to edit the appearance of your lesson page across different device sizes. Though the Lesson Editor is fully web responsive without requiring additional coding (ensuring your content is responsive on any device size), Responsive Editing is a helpful tool for those needing their pages to follow a specific format (allowing their containers to respond responsively).

To access this option, select RESPONSIVE EDITING from the File menu (or use the keyboard shortcut: R):

From the Responsive Editing window, you may use the icons at the top to select a mobile layout:

When previewing your layout, use the tool options in the top left corner of any container to move, edit, adjust settings, duplicate or delete any tool, row or column:

You can drag and drop any of the containers to rearrange your lesson layout easily. As you drag, a blue guide will appear, marking spots where you can drop items:

To exit the Responsive Editing window, select the EXIT button to return to the Lesson Editor:

As you create your lesson layouts, it is important to consider how your columns will stack on your page across different device sizes. When creating your columns, we encourage you to preview your layout across large, medium, and small device sizes in order to fully anticipate how your content will appear to your users. With smaller screens, the columns and tool modules will stack left to right, and from top to bottom. Here is an example of two columns on a large device screen:

Here is the same page on a small device screen, with top to bottom column stacking:

Breakpoints refer to the screen-width values (in pixels) for each device size, which can be adjusted if you want different behavior for different device sizes. To adjust the breakpoint for specific rows/columns/tool modules, simply access that item’s settings panel and locate the Visibility option on the Advanced tab:

Changes made on the settings panel will override any globally set breakpoint settings.