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, toggling on the "Fully responsive" option enables the content on the canvas to reactively resize and scale to properly fit within its set containers as the screen width changes, creating a fully responsive design regardless of the screen size.
How Breakpoints Work in Flex
A breakpoint refers to the screen width (in pixels) at which your experience will responsively switch to the following appropriate variant. For example, if you set the minimum screen width for your desktop variant to 1,280 pixels, it will continue to show 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 following smallest variable (more than likely the tablet variant). So, your experience will display the desktop variant at a screen width of 1,281 pixels or more.
Additionally, with Fully Responsive toggled on, the content on the canvas will continuously scale, resize, and re-stack according to the responsive settings applied to it. Hence, the label, "Fully responsive." Learn more about Adaptive versus Fully Responsive.
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 601 pixels means your experience will display the tablet variant until the screen width reaches 600 pixels, then it will switch to the mobile variant
Select Save
Select Confirm on the notification window
Using Fully Responsive Mode
As mentioned, in addition to setting breakpoints to switch between variants, Fully Responsive mode continuously and responsively resizes the content on the canvas as the screen width changes.
Important: Sections and stacked Groups are required to use Fully Responsive mode properly.
The Fully Responsive mode is toggled on by default in the Inspector Panel. We recommend keeping it on for advanced designers and those familiar with responsive concepts; however, to toggle it off:
Navigate to the Inspector Panel while in Design mode
Click the toggle next to the "Fully responsive" 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.
When Fully responsive toggled off, the content on your variants will not responsively re-stack and resize. Instead, they will uniformly scale up or down until the screen width reaches the next breakpoint. Learn more about the difference between Fully Responsive and Scale mode here.
Though Flex refers to the three responsive variants as Desktop, Tablet, and Mobile, they aren't tied to those device types. Instead, the experience will automatically display the corresponding breakpoint depending on the viewer's screen width.