Create a breakpoint for responsive authoring

Learn how to create custom breakpoints for responsive authoring to control the look and feel of a page at different form factors.

Before you begin

Role required: ui_builder_admin

About this task

UI Builder currently offers three default form factors:

• Desktop (1281 pixels and larger)
• Tablet (1280 pixels and smaller)
• Mobile (500 pixels and smaller)

Add up to three additional breakpoints. For example, there's a default form factor of 500 pixels and smaller for mobile devices, but you may need a breakpoint of 360 pixels.

Note:

Custom breakpoints represent a range. If you create a breakpoint at 800 pixels, all changes apply to devices with a width at and lower than the new size. For example, a page opened on a screen 750 pixels wide uses the 800 pixel settings (properties and styles) unless there's another custom breakpoint at 750 pixels.

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in or create an experience by selecting Create > Experience.
   See Configure how users interact with your applications in UI Builder for more information on creating experiences.
3. Open an existing page created from scratch with responsive authoring or create a page from scratch with responsive authoring.
   For more information about how to create a page, see Create a page in UI Builder.
4. Select the menu icon next to the three form factor icons.
   
5. Select + Add breakpoint.
   
6. Type in a width (in pixels) and select Add.
   
   The new breakpoint is saved and appears as a form factor icon.

   

   As you build the page, select any of the form factor icons to view and edit the page at that size.

7. To edit or delete a custom breakpoint, select the menu icon, point to the breakpoint name, and select the edit or delete icon.
   

   Note:

   The default form factors (desktop, tablet, and mobile) can't be edited or removed.