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.
Breakpoint Styles
📍 You can define 3 possible breakpoints:
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
How to remove and replace breakpoints?
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).
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).
🤩 Upcoming: The Full Breakpoint
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.