Adjust styles for responsive authoring

  • Release version: Australia
  • Updated March 12, 2026
  • 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 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. 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. 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 Critical Operations Workspace Admin Center.

        Configuration panel for stylized text component with black arrow pointing to text field.

      6. Select Save.
    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.

        Configuration panel for stylized text component with black arrow pointing to margin option and large size option.

      5. In Alignment, select the center icon.

        Configuration panel for stylized text component with black arrow pointing to center icon for alignment field.

      6. Select Save.
      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.
      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.