Responsive Design
Configure mobile and tablet behavior for pages and key widgets.
Breakpoint workflow
1
Build desktop first
Create your base layout in desktop view.
2
Adjust tablet and mobile behavior
Review spacing, stacking, fit/height controls, and alignment per widget.
3
Verify interaction patterns
Confirm menu behavior, CTA layout, and content readability on smaller screens.
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
- Media fit and height behavior
- Text sizing and line-height adjustments
- Widget-level mobile visibility options
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.
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
Related Help Docs
Updated Apr 12, 2026
Was this helpful?