In Flex, you can override the layout and configuration of content on the canvas that responsive variants inherit from the Base Canvas. Doing so is called applying a Breakpoint Override.
When designing in Flex, you select a base, or source, canvas to use as your primary canvas for adding and configuring content. The updates made on the Base Canvas cascade across your other two responsive variants, increasing efficiency because you don't have to set up each variant independently, as you would in Studio.
It's important to note that changes made on variants other than your Base Canvas do not cascade back to the Base Canvas. Instead, they override what was inherited from the Base Canvas. Hence the name, Breakpoint Override.
You will more than likely use quite a few Breakpoint Overrides to fine-tune the layouts of your smaller variants. For example, suppose you set a text box's width to a relative 30% of a full-width section. On the desktop variant (set as the Base Canvas), the text box looks good because the canvas is 1600px wide. However, a relative width of 30% on a mobile canvas is substantially narrower, causing the text box to appear disproportionately thin.
To fix this issue, you'd apply a Breakpoint Override on the mobile canvas to increase the width of the text box so it fits more naturally in the smaller space.
How to Apply a Breakpoint Override
Breakpoint Overrides can be applied to any content on the canvas. To do so:
Select the target object on your tablet or mobile variant
Note that Breakpoint Overrides applied to tablet variants will cascade down to the mobile variant as well, but not the other way around
Make adjustments to any of the following attributes:
Size
Rotation
Appearance
Visibilty
Press Enter on your keyboard to save the Breakpoint Override
Though you can adjust many attributes of an object when applying a Breakpoint Override, there are a few changes that cannot be made, including:
Editing text within a text box
Updating or applying interactions
Updating or applying animations
Updating or applying Object States
Order of stacked objects inside a group or section
When adjusting the latter four items listed above on a lower variant, the update will be made to all variants, including the Base Canvas.
How to Revert a Breakpoint Override
Once a Breakpoint Override has been applied to an object, it will be highlighted in blue under its variant in the Layers Panel. Additionally, the attribute that was overridden will be highlighted in blue in the Inspector Panel.
To revert a Breakpoint Override back to parity with the Base Canvas:
Select the target object on the variant you applied the override to
Or select it from the Layers Panel
Identify the overridden attribute, highlighted in blue, in the Inspector Panel
Hover over the blue dot left of the attribute name in the Inspector Panel to reveal the Revert icon
Click on the Revert icon
Following the above process will instantly revert the Breakpoint Override.
As mentioned, Breakpoint Overrides are a feature you'll more than likely use a lot in Flex. To learn more and practice applying them, check out our self-paced course, Responsive Accordions and Collapsible Content. In this course, we walk through how to build responsive accordions, while also explaining how to apply Breakpoint Overrides. The course is a part of our Flex Foundations learning path.