Breakpoints in Droip provide you with complete control over your website’s design and layout for various screen sizes.

This feature allows you to customize content, test responsiveness, and add custom breakpoints to optimize your website’s appearance on different devices.

Canvas Breakpoints

The breakpoints icons are located in the middle of the canvas, providing four default options:

• Desktop: Design for larger screens like desktops or laptops. Default value: 1400px.
• Tablet: Ideal for iPads or tablets. Default value: 991px.
• Mobile Landscape: Use for landscape view on phone screens. Default value: 767px.
• Mobile: Suitable for smaller screens like phones. Default value: 575px.

Custom Breakpoints

You can set custom breakpoints manually by clicking the ellipsis icon beside the default breakpoints.

Or, choose from a list of predefined breakpoint options for various devices or screen sizes from the drop-down list.

Switching Breakpoints

Droip makes switching between breakpoints effortless, enabling you to work with different screen sizes concurrently. Preview your website in real time for each breakpoint, allowing quick adjustments to optimize the design.

📝 Note: The Desktop breakpoint serves as the global viewport. Unless you set different styles for other breakpoints, the desktop’s style settings will be applied to all devices.

Testing Responsiveness and Fluidity

Use the Preview button to test the responsiveness and fluidity of your website on different screen sizes. This allows you to ensure that your website looks and functions great on any device and make any necessary adjustments.

Hide Elements for Different Breakpoints

Using breakpoints, you can also hide elements for different breakpoints. This is particularly useful for removing clutter and simplifying the design on smaller devices, such as mobile phones. You can easily hide elements such as sidebars, navigation menus, and other elements that are not necessary for smaller screens.