Adding responsive variants to your experience is the first step in the responsive content creation process in Flex. As a best practice, we recommend adding a tablet and mobile variant directly after starting a new project, before you begin adding any content to the canvas. Doing so will ensure all the content you add scales appropriately between variants.
Adding a New Responsive Variant
As mentioned above, we highly recommend adding tablet and mobile responsive variants as soon as you start a new project. Once your new experience has been created:
Navigate to the Inspector Panel while in Design mode
Select the + icon (Add breakpoint) next to the "Responsive variants" option
Select Mobile from the dropdown menu
Select either "Set mobile-first" or "Use Desktop as Base" from the "Choose your design workflow" window
Flex allows you to choose between mobile and desktop as your base variant; if your experience will be primarily viewed on mobile devices, select "Set mobile-first"
The same option is available when creating a tablet variant first
Regardless of which variant is your base, it should be the canvas on which you add and edit all new content on
Repeat steps one through three for the tablet variant
Flex organizes variant canvases in a cascading fashion. So, if you're using a desktop as your base, the canvases will cascade downward in size. The reverse is if the mobile is used as the base variant.
Removing Responsive Variants
Navigate to the Inspector Panel while in Design mode
Hover over the "Responsive variants" option
Select the Options icon (Edit breakpoints)
Hover to the left of the "Min screen width" section of the target variant in the "Edit breakpoints" window
Click the Delete breakpoint icon
Select Save
Select Confirm on the notification window
It's important to note that your base variant can not be deleted. So, to set a new base variant, you will need to delete the current version of the target variant and re-add it. Doing so will prompt you to set it as the base.