Responsive page title and toolbar

On View and Edit pages, the page title and toolbar are responsive. The page title area has two parts:

• The page title
• The page toolbar.

By default, the available page width is shared as follows:

• On medium and large devices (width is 769px or greater), the width is shared equally by both parts.
• On small devices (width is 768px or less), the page title consumes 30% of the width and the toolbar consumes 70% of the width.

Administrators can override these proportions at the application level to change the percentage of space occupied by the page title to give the toolbar more space to display actions in the toolbar rather that in its overflow using the following CSS classes:

• .rbs-objectViewTitle — CSS class to customize the width of the page title in a record view page
• .rbs-objectEditTitle — CSS class to customize the width of the page title in a record edit page

To customize the width of the page title for an application, add custom styles to either the custom header or to the custom sidebar. The following example changes the width of the page title to consume 20% of the screen width on view pages:

<style>
  @media only screen and (min-width: 769px) {
  /* Device is Small, medium, large */
  .rbs-objectViewTitle,.rbs-objectViewTitle {
    width: 20%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
  }
  @media only screen and (max-width: 768px) {
  /*Device is Extra Small */
  .rbs-objectViewTitle,.rbs-objectViewTitle {
    width: 20%; /* Rest of space will be consumed by toolbar buttons and overflow */
    }
  }
</style>

For information about adding code to custom headers and sidebars, see Header and footer and Custom sidebar.