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 tablet and mobile variants 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 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 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"
Regardless of which variant is your base, it should be the canvas on which you add and edit all new content on
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 Canvas.
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 Canvas can not be deleted. So, to set a new Base Variant, you will need to delete and re-add the responsive variants. Doing so will prompt you to choose your design workflow once again.