Flex Breakpoints (1.0)

See Responsive Tablet for more information on making your site responsive.

A breakpoint is a size at which the design adjusts to suit a given screen width. Breakpoints allow responsive design since they scale up and down. The default breakpoints in Flex are:

• Desktop (1025px-1399px)
• Wide desktop (1400px and up)
• Tablet (768px-1024px)
• Mobile (767px and below)
• Mobile landscape (468px-767px)

For the best results, test adjustments for mobile breakpoints on a mobile device rather than resizing a desktop screen.

By clicking the different views at the top of the page, you can switch between breakpoints.

Changes to the main breakpoint (desktop) affect all breakpoints. However, if you need to make non-structural changes to the position and size of elements for any particular breakpoints (for example, mobile landscape), these changes will not affect the other modes. Changes to the Mobile (portrait) breakpoint have an impact on the Mobile Landscape breakpoint.

Structural Changes

Any structural changes made to a breakpoint have an effect on all other breakpoints. When you make a structural change on a breakpoint other than the main breakpoint (desktop), a warning notice appears to tell you that the change impacts all breakpoints. Here are some instances of structural changes:

• Adding or removing content
• Insert a widget inside a flexbox.
• Taking a widget out of a flexbox and putting it on the grid
• Delete a widget from inside a container
• and much more

Hide on Breakpoint

You may want to hide some elements at certain breakpoints (for example, hiding an image on mobile devices).

To hide an element at a specified breakpoint:

1. Click the view in the top menu to switch to the breakpoint where you wish to hide the element.
2. Select the element you wish to hide.
3. Click the Hide on this breakpoint button next to the element in the Layers panel.