Responsive Design

Breakpoint workflow

Create your base layout in desktop view.

Review spacing, stacking, fit/height controls, and alignment per widget.

Confirm menu behavior, CTA layout, and content readability on smaller screens.

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
Row background image frame controls for separate mobile positioning
Row mobile overlay controls for switching background overlays on smaller screens
Column side curves with separate mobile edge and depth controls
Media fit and height behavior
Text sizing and line-height adjustments
Widget-level mobile visibility options

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.

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.
When a row background image needs a different crop on mobile, use the background frame controls to reposition the image separately from desktop.
Use row Mobile Overlay controls when a background image needs a stronger or lighter overlay on phones than it uses on desktop.