# Responsive design

## Single column on narrow screens

Orbeon Forms supports [responsive design](https://en.wikipedia.org/wiki/Responsive_web_design) for forms you create with Form Builder. The main aspect of this is that when your forms are shown on a narrow screen, for instance on a mobile phone, fields are shown in a single column.

\[SINCE Orbeon Forms 2022.1]

The Form Runner [Landing page](https://doc.orbeon.com/form-runner/form-runner-pages/landing-page) is also responsive.

## Example

If you have a form with a section containing a grid with two columns, on a desktop or tablet your form might show as:

![Fields as shown on a desktop](https://4129616727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEkBiSDvlXs3VWiO0Zu%2F-LEkBmMpnaxnftLGDglW%2F-LEkC33J8NE94yP4rjDR%2Fresponsive-desktop.png?generation=1528743347848576\&alt=media)

When the same form is loaded from a mobile phone, fields will automatically be shown in one column to better fit that screen:

<div align="center"><img src="https://4129616727-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEkBiSDvlXs3VWiO0Zu%2F-LEkBmMpnaxnftLGDglW%2F-LEkC33N-vh5hmxuVrVg%2Fresponsive-mobile.png?generation=1528743353037754&#x26;alt=media" alt="Fields as shown on a mobile phone" width="40%"></div>

## Limitations

The [Summary page](https://doc.orbeon.com/form-runner/form-runner-pages/summary-page) and [Published Forms page](https://doc.orbeon.com/form-runner/form-runner-pages/published-forms-page) are not yet responsive.

## See also

* [Mobile support](https://doc.orbeon.com/form-runner/features/mobile)
* Blog post: [Responsive design](https://blog.orbeon.com/2015/08/responsive-design.html)