Once responsive variants have been added to your experience, you can set the exact breakpoint at which it will automatically switch to the corresponding variant. Additionally, Fluid Layouts enable the content on the canvas to reactively resize and scale to properly fit within their set containers as the screen width changes, creating a fully responsive design.
How Breakpoints Work in Flex
A breakpoint refers to the screen width (in pixels) at which your experience will responsively switch to the next appropriate variant. For example, if you set the minimum screen width for your desktop variant to 1,280 pixels, it will continue to show the desktop variant until the screen width reaches the set minimum. Then, once the screen width reaches 1,280 pixels, your experience will automatically switch, or "break," to the next smallest variable (more than likely the tablet variant). So, your experience will show the desktop variant at a screen width of 1,281 pixels and above.
No screen refresh or loading is required when your experience switches variants; it is all done responsively in real-time.
Editing Responsive Breakpoints
All responsive variants (desktop, tablet, and mobile) have default breakpoints. However, you can easily switch them to any desired pixel width. To do so:
Navigate to the Inspector Panel while in Design mode
Hover over the "Responsive variants" option
Select the Options icon (Edit breakpoints)
Adjust the "Min screen width" value of the target variant
Reminder, you're adjusting the screen width when the target variant will switch the next, not when it will display
For example, setting the minimum screen width of your tablet variant to 800 pixels means your experience will display the tablet variant until the screen width reaches 800 pixels, then it will switch to the mobile variant
Select Save
Select Confirm on the notification window
Using Fluid Layouts
In addition to setting breakpoints to switch between variants, Fluid Layouts continuously and responsively resize the content on the canvas as the screen width changes.
Important: Sections and Flex Groups are required to accurately use Fluid Layouts (beta documentation on those two features will be available soon).
The Fluid Layouts mode is toggled on by default in the Inspector Panel. We recommend keeping it on; however, to toggle it off:
Navigate to the Inspector Panel while in Design mode
Click the toggle next to the "Fluid Layouts" option
Once toggled off, the breakpoint values next to your responsive variants will switch from "[set value] px & above" (for desktop, as an example) to only the screen width where the variant will automatically display.
As a reiteration, with Fluid Layouts toggled off, the content on your variants will not responsively scale and resize. Instead, they will uniformly scale up or down until the screen width reaches the next breakpoint.