Responsive Design
Responsive design lets you adjust your page's appearance for different screen sizes.
Preview Your Design Responsively
Click the breakpoint selector in the editor's top bar and choose a screen size to preview your page at that width.
Customize Properties per Breakpoint
- Set your base styles on Desktop.
- Mouse over a control that supports responsive values and click its breakpoint selector icon .
- Choose the breakpoint and set the value you want to use there.
Smaller built-in breakpoints inherit values from larger ones until you set an override. Clearing an override restores the inherited value. See Element Properties.
Built-In Breakpoints
| Breakpoint | Styles apply at |
|---|---|
| Desktop | All widths |
| Tablet Landscape | 1119px and below |
| Tablet Portrait | 1023px and below |
| Phone Landscape | 767px and below |
| Phone Portrait | 479px and below |
To add your own, see Breakpoints in Preferences.