Configure widget breakpoints

Access Type: Widgets - Editor

A responsive breakpoint is a specific screen width where the widget's layout will change in order to better fit the device on which it is viewed. In this article, we will cover how to edit an existing widget so that its layout adjusts per screen size.

Click Widgets on the left-hand panel and select the Edit icon inline with a widget name.

Navigate to the widget preview toolbar to select the device for which you are adjusting the layout of the widget. The breakpoint for each screen size is inherited from the current brand preview in the widget editor.

Note: While this step is not required to successfully configure a widget breakpoint, it will enable your organization to visualize how your configuration is affecting the design of your widget for that screen size.

Select a component from the widget preview window. With the component highlighted, navigate to the right-hand panel and click the Style tab.

Use the Breakpoints drop-down menu to select a specific breakpoint that you wish you configure.

With the breakpoint select, expand the Global accordion and use the provided fields to edit the styling of the widget for the breakpoint.

Repeat as necessary for other components in each layer of the widget.