# Responsive Design

The Kendo UI for Angular Pager is designed to provide a seamless user experience across various screen sizes and devices. By leveraging its built-in responsive design capabilities, the Pager ensures that its layout dynamically adjusts to accommodate different widths, making it a great choice for modern web applications.

By default, the Pager adapts its elements to maintain usability and clarity in  desktop, laptop, table, and mobile environments. To control this behavior, use the built-in [`responsive`](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagercomponent#responsive) property and adjusts its value to either `true` or `false`.

> When the Pager is in non-responsive mode, its internal controls automatically wrap onto a new row to ensure all elements remain accessible and visible.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/pager/responsive/source.txt)

Based on its width, the Pager dynamically determines which internal elements to render. When the available space is limited, the Pager hides its controls in the following order to maintain usability:

1. The Pager replaces the [numeric page buttons](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagernumericbuttonscomponent) with the [numeric input](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerinputcomponent) mode.
2. The [info element](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerinfocomponent), which provides details about the current page and total items, is hidden.
3. The `Page` label within the [numeric input](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerinputcomponent) is concealed to save space.
4. The `items per page` label is removed to streamline the layout.
5. The [DropDownList for selecting page sizes](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagerpagesizescomponent) is hidden to prioritize essential elements.

> caution Using the [Pager template](https://www.telerik.com/kendo-angular-ui-develop/components/pager/template) to customize the content of the component disables the built-in responsive behavior.

## Suggested Links

* [API Reference of the Pager](https://www.telerik.com/kendo-angular-ui-develop/components/pager/api/pagercomponent)