Adding Responsive Design

Responsive design mode can be entered by clicking on the devices icon in the vertical toolbar.

Flex supports four breakpoints:

• Desktop (Default)
• Laptop
• Tablet
• Phone

Responsive Modes and Behavior

If you apply styles to your components without engaging a responsive editing mode, any style changes you apply will affect all breakpoints. This is the same as engaging Desktop mode, which is considered default.

If you apply changes in any other breakpoints (Laptop, Tablet or Mobile), the styles will apply only to that mode.