Flex: Breakpoints

If you would like to make your site responsive, read our Responsive Desktop/Tablet doc.

A breakpoint is a specific screen width at which a site design adjusts. Breakpoints allow you to create a responsive website that adapts to any device or browser size that it’s viewed on.

The default breakpoints in Flex are:

• Desktop (1025 – 1399px)
• Wide desktop (1400px or more)
• Tablet (768 – 1024px)
• Mobile (767px or less)
• Mobile landscape (468 – 767px)

To switch breakpoints, open your site editor and click the different icons in the upper left-hand corner.

Changes in Flex

Your main breakpoint is your desktop; any changes made affect all other breakpoints.

Non-structural Changes

Any non-structural changes (position and size of elements) made to all other breakpoints will not affect most breakpoints*.

* All changes made to the Mobile breakpoint affect the Mobile landscape breakpoint

Structural Changes

All structural changes made on one breakpoint will show on all other breakpoints. Structural changes include:

• Removing or adding content
• Dragging a widget inside the flexbox
• Dragging a widget from a flexbox to the grid
• Deleting a widget inside a container
• And more

Hiding Elements

Note: hiding elements on your main breakpoint will not affect other breakpoints.

Flex allows you to hide elements on specific breakpoints. To hide, select the breakpoint where you want to hide the element. E.g. Mobile

Select the element you want to hide.

Click on the Layers panel in the left menu, locate the element in the list and click “Hide on this breakpoint.”

Note: If you hide an element that contains nested elements (e.g. hiding a flexbox that contains a text box), all elements will be hidden.

To unhide, click on the Layers panel in the left menu, locate the element in the list and click “Show on this breakpoint.”