Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Studio.
In each project, you can add or edit the "breakpoints", which are the width of the screen where the design changes when the site is responsive.
*The breakpoints setting will be common through the project, and cannot be changed for each page.
How to add/delete breakpoint
By default, there are two breakpoints : "Tablet: 840px" and "Mobile: 540px".
In addition to these, you can add breakpoints of "Small: 1140px" and "Mini: 320px" or remove unnecessary breakpoints.
With no boxes selected, go to "Responsive" menu in the top style bar. Click the option menu on the right end and click "Customize Breakpoints".
2. Click the "+" mark of the breakpoint you want to add.
3. If there is a breakpoint that you do not want, move the cursor to the breakpoint you want to delete and click the "x" on the top right corner.
*You cannot set a breakpoint outside of the base or add a breakpoint other than Small or Mini.
How to edit the value of a breakpoint
To change the value of each breakpoint, go to the "Edit Breakpoints" mode, move the cursor over the icon of the breakpoint you want to change and enter the desired value, or drag the vertical line indicating each breakpoint.
