How to set breakpoints
A breakpoint is the screen width (in pixels) at which your layout changes when setting up responsive design. When the screen width of a visitor's device goes above or below a set breakpoint, the design that matches that screen width is automatically applied.
In Studio.Design, you can add new breakpoints or change their values. These settings apply to the entire project—you can't set different breakpoints for each page.
You can switch between and edit breakpoints from the toolbar at the bottom of the editor.
Available breakpoints in Studio.Design
Studio.Design offers 5 breakpoints in total, including the default (PC). Here's a breakdown of each one:
Breakpoint | Default value* (recommended size) | Adjustable range | Highlight color in the editor | Included by default* | Can be removed |
Default (PC) | 1280px | 1920px–320px | None | ○ | × |
Small | 1140px | 1280px–991px | Blue | × | ○ |
Tablet | 840px | 990px–691px | Green | ○ | ○ |
Mobile | 540px | 690px–361px | Orange | ○ | ○ |
Mini | 320px | 360px–320px | Pink | × | ○ |
*For projects created from a Studio.Design Store template, these settings may have been customized by the template designer.
When the screen width exceeds the maximum of a given breakpoint, the layout from the next larger breakpoint is applied. If the screen width exceeds the maximum of the PC (default) breakpoint, the design at that maximum width is used.
How to add a breakpoint
By default, your project includes [Default], [Tablet], and [Mobile]. You can add the [Small] and [Mini] breakpoints by following these steps:
Click [Edit mode] on the right side of the toolbar.
Click the breakpoint you'd like to add.
How to edit a breakpoint's value
You can adjust each breakpoint's value by entering a number in the toolbar or by dragging the vertical line outside the screen.
Editing from the toolbar
To edit the breakpoint you're currently viewing: Update the number shown on the left side of the toolbar.
To edit a different breakpoint: Click [Edit mode] on the right side of the toolbar, then update the number for the breakpoint you want to change.
Editing with the breakpoint guideline
You can also drag the breakpoint bar to adjust its value.
How to remove a breakpoint
You can remove any breakpoint except [Default].
Click [Edit mode] on the right side of the toolbar.
Hover over the breakpoint you want to remove.
Click the [×] that appears in the top-right corner.
