---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/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


---

# Adjust styles for responsive authoring

# Adjust styles for responsive authoring {#ariaid-title1}

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

When creating pages with responsive authoring for different form factors, learn how to change style options to increase the usability of the page at smaller sizes.

## Before you begin

Role required: ui_builder_admin

## About this task

A method of increasing page usability is to tailor components using different styles across breakpoints. There are numerous options for editing styles. In this procedure, edit the margin around the stylized text component and
reduce the text size so it uses less space on smaller form factors.

## 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://servicenow-prod.fluidtopics.net/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. 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://servicenow-prod.fluidtopics.net/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. At the top, check that the desktop responsive authoring icon is selected.  
   ![Black arrow pointing to desktop form factor icon at the top of a UI Builder page in editor view.]()
5. On the stage, select + Add content.
6. On the Layouts tab, select Single column.
7. Add the stylized text component.
   1. Select the + icon in the center of the column on the stage.
   2. On the Components tab, find and select the Stylized text component.
   3. In the configuration panel, select None - Configure the component manually.
   4. In the configuration panel, on the Configure tab, double-click (or use the keyboard shortcut) in the Text field to select the default text.
   5. Replace the default text by entering <kbd class="ph userinput">Critical Operations Workspace Admin Center</kbd>.  
   6. Select Save.
   {#responsive-authoring-adjust-styles__substeps_z3n_1cn_5bc}
8. Add some space around the stylized text component and center it.
   1. In the content tree, select Stylized text 1.
   2. On the configuration panel, select the Styles tab.
   3. In Spacing, select Margin.
   4. Select Large in the list.  
   5. In Alignment, select the center icon.  
   6. Select Save.

   {#responsive-authoring-adjust-styles__substeps_zt1_dym_5bc}  
   The stage updates automatically, showing the additional white space around the stylized text component and centering it.
9. Select the tablet form factor icon.  
   ![Black arrow pointing to tablet form factor icon at the top of a UI Builder page in editor view.]()

   The spacing and heading size of the stylized text component looks good at tablet size.
10. Select the mobile form factor icon.  
    ![Black arrow pointing to mobile form factor icon at the top of a UI Builder page in editor view.]()

    The stylized text component uses a great deal of vertical space at the smaller size.

11. Remove the extra margin space and make the heading smaller just for the mobile form factor.
    1. In the content tree, select Stylized text 1.
    2. On the configuration panel, select the Styles tab.
    3. In Spacing, select Margin.
    4. Select 0 in the list.
    5. Select the Configure tab.
    6. In HTML tab, select H3.
    7. Select Save.

    {#responsive-authoring-adjust-styles__substeps_mf2_tzm_5bc}  
    The stage updates automatically showing that the stylized text component uses less space.

12. Select the tablet and the desktop form factor icons at the top to confirm that no changes were made to the larger form factors.

*[\>]: and then