How to use breakpoints

In today's digital landscape, users access content across a variety of devices, from smartphones to desktops. Ensuring that interactions adapt seamlessly to different screen sizes and devices is crucial for providing a user-friendly experience.

This guide will walk you through the process of implementing responsive interactions that adjust dynamically to various platforms. By following this guide, you will learn how to use breakpoints, apply minimum and maximum size constraints to optimize layouts for different devices, and create one interaction that works across mobile and desktop environments.

Checkout how to create responsive interaction before this article.

Note that the breakpoints are not available yet to all customers.

Using breakpoints

Next, we'll adjust the layout of the interaction for desktop mode by using breakpoints. To create interactions using breakpoints, follow the steps outlined below:

1. Select the element and go to the Settings tab
2. Under the Placement category, you will find a switch to enable “Device specific placement”.
   
   
3. Change the layout as needed. Note that the styles are shared between mobile and desktop versions.

In our example interaction, lets resize the size of the image element to fit the right half of the view and set the constraints type to right stretch if those were not set automatically. 

Choose the group element containing text and buttons, then activate breakpoints for "Device specific placement". Position the group element in the desired location according to your needs. For instance, if you want to place it to the left top side, set the constraint type to left top.

After implementing these adjustments, the interaction now appears differently in mobile mode compared to desktop mode:

Verify compatibility on all screen sizes

To verify whether the layout of the interaction adapts correctly on all screen sizes, please follow these steps:

1. Select Custom device mode.
   
2. Adjust or modify the frame size to observe any layout changes.
   

Show different elements for mobile and desktop versions

Below we used the option to hide elements (the image in this case) for the mobile version. We can achieve this by selecting the element, navigating to the settings side panel and disabling the "Show by default" option for the element that we desire to be hidden on the specific device.

Troubleshooting

Make sure the Responsiveness feature is enabled

1. Open the interaction in editor mode.
2. In the top left corner, you will see the name of the interaction. Open the toggle as shown below:

 3.    Click on Advanced options to see more options.

4.    In the options, you will see the “Enable responsiveness” option. For the new interactions, this mode is set to responsiveness by default.