There are two ways content can react and resize on the canvas between breakpoints: Fully Responsive and Scale mode. Regardless of which mode you use, your experience will automatically switch to the next responsive variant when the screen width hits a breakpoint.
Below are overviews of the two modes in Flex.
Scale Mode
Scale mode is not responsive; the content on the canvas does not fluidly adapt or restack. Instead, content is statically placed on the canvas, and as the screen width changes, the content uniformly scales up or down in size along with it until a breakpoint is hit. At that point, your experience will automatically switch to the corresponding responsive variant.
Though Scale Mode doesn't provide a fully responsive solution, it is easy to learn and serves as a great starting point for new or less experienced digital designers just getting into Flex. Note that Scale mode may require more manual content adjusting on each responsive variant.
To switch to Scale mode:
Ensure there is more than one responsive variant set up in the experience
Navigate to the Fully Responsive toggle in the Inspector Panel
Toggle off Fully Responsive
Fully Responsive Mode
Fully Responsive, unlike Scale mode, allows content on the canvas to fuidly adapt and restack between breakpoints as the screen width changes, rather than uniformly scale. Fully Responsive mode works in conjunction with responsive sizing, positioning, and layout settings.
The learning curve for Fully Responsive mode may be steeper upfront for newer or less experienced designers, but after the initial learning period, it will allow for faster, more efficient content creation.
Fully Responsive mode is toggled on by default when a new responsive variant is added to an experience.
To learn how to build fully responsive content in Flex, check out our Flex Foundations certification and learning program. The program is comprised of quick, self-paced build along courses that each walk through how to build different types of responsive sections in Flex.
