Assemble mobile layouts for web apps

Learn how to assemble mobile layouts for Retool web apps.

Retool apps are responsive and support different viewport widths. You can configure separate desktop and mobile layouts to customize your app for mobile web users. To do this, you optionally show or hide components on the mobile layout and arrange them as needed. The mobile layout also uses a narrower 12-column grid layout to accommodate the smaller viewport size.

Both desktop and mobile layouts use the same component but allow you to change their position independently. Any changes you make to a component's settings, such as labels or event handlers, apply to both views.

Switch between desktop and mobile layouts

No components are included in the mobile layout by default. Once you add a component, the App IDE navbar displays a toggle to switch between desktop and mobile layouts.

Use the layout controls to switch between Desktop and Mobile layouts. Components you add to either layout appear only in the layout you're currently viewing. For example, if you add a component while viewing the mobile layout, it does not appear in the desktop layout until you enable it.

Add components to the mobile layout

Use the Inspector in the right panel to add selected components to the mobile layout. Click the Advanced settings icon in the Appearance section, then enable Show on mobile.

Retool initially positions components in the mobile layout similar to the desktop layout. If another component is already in the same position on the mobile layout, the App IDE notifies you. Should this occur, reposition any existing components on the mobile layout first to allow for the addition of the other component.

Arrange components in the mobile layout

You can customize the arrangement of components for each layout separately—repositioning a component in the desktop layout does not alter its position for the mobile layout. Switch to the mobile layout and then position or resize components as needed.