How to Set Breakpoints
A breakpoint is a reference value for the screen width (in pixels) at which the layout switches when setting up a responsive design. If the width of the screen on which the site is viewed exceeds or falls below the set breakpoint, a design that fits that screen width will automatically be applied.
Breakpoints can be added and their values changed in Studio. The settings will be the same for the entire project and cannot be different for each page.
Switching and editing breakpoints is done primarily with the toolbar at the bottom of the editor.
Breakpoints Available in Studio.Design
Five types of breakpoints can be set in Studio.Design, including the default (PC). The specifications of each breakpoint are as follows
Breakpoints | Default setting* (recommended size) | Settable range | Highlight color on editor | Exists from the beginning*. | Deletion |
Default (PC) | 1280px | 1920px to 320px | None | ✔︎ | × |
Small | 1140px | 1280px to 991px | Blue | × | ✔︎ |
Tablet | 840px | 990px to 691px | Green | ✔︎ | ✔︎ |
Mobile | 540px | 690px to 361px | Orange | ✔︎ | ✔︎ |
Mini | 320px | 360px to 320px | pink | × | ✔︎ |
* Projects created from Studio.Store templates may have been customized by the template designer.
If the display screen width exceeds the maximum width of each breakpoint, the layout at the next largest breakpoint will be applied; if the PC (default) maximum is exceeded, the design at that maximum will be applied.
How to Add Breakpoints
By default, [Default], [Tablet], [Mobile] are set. You can add [Small] [Mini] by following the steps below.
Click [Edit Mode] on the right side of the toolbar.
Click on the breakpoint you wish to add.
How to Edit Breakpoint Settings
The value of each breakpoint can be adjusted by entering a numerical value on the toolbar or by dragging a vertical line off-screen.
How to Edit on the Toolbar
To edit a breakpoint that is currently displayed: rewrite the value displayed on the left side of the toolbar.
To edit a breakpoint that is not currently displayed: Click on [Edit Mode] on the right side of the toolbar and rewrite the value of the breakpoint you wish to edit.
How to Edit with Breakpoint Guidelines
You can also drag the breakpoint bar to adjust it.
How to Delete a Breakpoint
Breakpoints other than [Default] can be deleted.
Click [Edit Mode] on the right side of the toolbar.
Place the cursor on the breakpoint you wish to delete.
Click the [X] in the upper right corner.
