Responsive Design

Breakpoint workflow

Common responsive controls

• Column and sub-column stacking
• Spacing and gap controls
• Global page/blog width baselines from Layout
• Row-level Mobile Inset tied to the global inset value in Layout
• Row mask fades with optional responsive scaling
• Media fit and height behavior
• Text sizing and line-height adjustments
• Widget-level mobile visibility options

Text and heading scaling

• Headings inside Text and Dynamic Text keep their saved typography while scaling more smoothly on tablet and phone widths.
• Review long headings at each breakpoint, especially if they use custom font size or line-height values.
• Use Text & Fonts for global typography defaults and the widget toolbar for one-off text edits.

Row spacing on smaller screens

• Turn on Mobile Inset for rows that should keep card-like breathing room on phones and tablets without changing desktop width.
• Use Compact row width when you want the whole row surface, including background and border styling, to stay tighter than the standard page width.
• Adjust the shared inset amount from Layout so matching rows stay consistent across the site.
• When a row uses Mask Fade, set a fade color that matches the surrounding section and turn on Responsive Scale if the fade should shrink on smaller screens.

Priority widgets to test on mobile

• Core workflow references: Creating Pages, Drafts and Publishing, and Widgets.
• Menu Widget
• Cards Widget
• Video Widget
• List Widget
• Sub Columns Widget
• Button Widget