Studio Two Editor: Working with Breakpoints

Breakpoints are screen size ranges that represent the possible sizes of visitors' devices (e.g. desktop or tablet). By default, all sites you create in the Studio Two Editor come with 2 breakpoints: desktop (1024px and above) and mobile (320-1023px).

With the Studio Two Editor, you can design the site for each breakpoint individually, ensuring that site visitors have the smoothest experience on every device.

You may want a wider variety of screen size ranges (e.g. tablet or small desktop). Add a preset breakpoint from the Responsive Settings panel, or create a custom range.

1. Go to your editor.

2. Click the Customize Breakpoints icon at the top of the editor.

3. Click Add Breakpoint and select the type you want:

   • Wide screen: For screens 1920px and above. Select this option to design the site for very wide desktop screens.

   • Tablet: For screens between 701px and 1023px, so it covers most tablets.

   • Custom: Select this option to create your own custom breakpoint range:

     1. Enter the maximum screen size (in px) into the field.

     2. Click Done.

Edit the size of existing breakpoints to create tailored views for site visitors. The part of the range you can edit depends on the breakpoint you're customizing.

1. Go to your editor.

2. Click the Customize Breakpoints icon at the top of the editor.

3. (In the Responsive Settings panel) Hover over the relevant breakpoint and click the More Actions icon .

4. Click Edit.

5. Depending on the breakpoint, enter the new range:

   • Smallest breakpoint on the site: Enter the maximum size into the field.

   • Largest breakpoint on the site: Enter the minimum size into the field.

   • All other breakpoints: Enter the maximum and minimum sizes into the fields.

6. Click Done.

You can delete any breakpoint you no longer need. The breakpoint below it automatically adopts its range.

However, keep in mind that when you delete a breakpoint, all customizations you made for that specific breakpoint are also deleted from the site.

1. Go to your editor.

2. Click the Customize Breakpoints icon at the top of the editor.

3. (In the Responsive Settings panel) Hover over the relevant breakpoint and click the More Actions icon .

4. Click Delete.

5. Click Delete in the popup.

Set the canvas width of the current breakpoint in your editor. Each breakpoint represents a range of screen sizes, so you can choose an exact width that always stays the same. 

1. Go to your editor.

2. Open the relevant breakpoint from the top of the editor.

3. Click the canvas width field at the top right of the canvas.

4. Enter your chosen width (in px) into the field.

5. Press Enter on your keyboard.

6. (Optional) Repeat steps 2-5 for each breakpoint.