---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Create a breakpoint for responsive authoring

# Create a breakpoint for responsive authoring {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

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)

{#responsive-authoring-create-breakpoint__ul_qsx_xwp_qbc}  
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 AllNow Experience FrameworkUI 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](https://www.servicenow.com/docs/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") 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](https://www.servicenow.com/docs/qg0Cc5eGfpImb71VJtmSew "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
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.

   ![New form factor icon is displayed.]()

   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.

*[\>]: and then