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.

In Droip, the desktop is considered the global viewport. Any changes you make in this view will automatically apply to all devices.

When you make changes in the tablet view, these adjustments will cascade down to smaller devices like mobile, adopting the changes made for tablets. This hierarchical approach ensures that each viewport inherits styles from the one above it unless specifically overridden, making your design process more streamlined and efficient.

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.