Using Dora’s built-in breakpoints, you can ensure your websites are responsive across different device widths.

How to add a breakpoint

Select the page where you want to add a breakpoint.
Click the [+] icon in the Breakpoint section on the right panel, and choose Tablet or Mobile.
Dora will automatically duplicate the selected page.

You can start customizing your design by setting breakpoints to make it more device-friendly.

Untitled

<aside> 📍 You can define 3 possible breakpoints:

Untitled

Desktop (base): Styles apply universally unless overridden at other breakpoints. Applies to screens 1200px wide and above.

Tablet: Styles applied to screens 1199px wide and below

Mobile: Styles applied to screens 743px wide and below

Untitled

</aside>

How to remove and replace breakpoints?

Untitled

Click [ - ] to remove a breakpoint.

The removed page will become an independent page.
This page will automatically resize to the global device dimensions (Desktop in this example).

Untitled

Click the dropdown menu to replace.

Clicking Page 2 will set it as the mobile breakpoint and resize the dimensions accordingly.
The previously connected page (Page 1) will automatically resize to the global device dimensions (Desktop in this example).

The current breakpoint is still a work in progress. We are transitioning it to the official version and will launch it in Beta.

Below are some of the features on the roadmap:

Cleaner, faster, intuitive interfaces. Make device width setting bar support breakpoint.
Support breakpoint in the following scenarios: 1920px, 1440px, 1280px, Custom Breakpoint.
Components will provide complete and convenient support for the breakpoint on various devices.
Support edit-once and apply to all devices.

For instance, you can change the text on the Desktop page, which will also be instantly applied to Tablet and Mobile pages.