Customize mobile and desktop layouts

Each Retool app has two layouts: desktop and mobile. When your app is running, the mobile layout is triggered when the width of a user's viewport is 600 pixels or less.

You can customize components so they are only visible on desktop or mobile. You can also rearrange components so they show up in completely different places, depending on if your app is using a desktop or mobile layout.

For example, the below GIF shows a green text component in the desktop layout and a blue text component in the mobile layout of the app.

Demonstration of the mobile layout changing at the 600px breakpoint.Demonstration of the mobile layout changing at the 600px breakpoint.

Demonstration of the mobile layout changing at the 600px breakpoint.

Enabling the mobile layout

By default the Retool editor displays the desktop layout of your app. To enable the mobile layout, you first have to toggle on the Show on mobile setting for at least one component.

Toggle on the **Show on mobile** setting to enable the mobile layout.Toggle on the **Show on mobile** setting to enable the mobile layout.

Toggle on the Show on mobile setting to enable the mobile layout.

Once this has been enabled for at least one component, you will see a toggle in the top navigation (only in edit mode) to switch between desktop and mobile layouts.

End users will not see this toggle. Instead, Retool will automatically switch to mobile layout if the browser width is less than 600px.

Toggle to switch between mobile and desktop layouts.Toggle to switch between mobile and desktop layouts.

Toggle to switch between mobile and desktop layouts.

🚧

Not seeing your mobile layout toggle?

The mobile layout toggle will not appear unless you have at least one component set to Show on mobile.

Change component layouts for mobile and desktop

Both mobile and desktop layouts have 12 columns — they are just narrower on mobile. When you are working on creating a mobile layout for your app, there are a few behaviors to keep in mind:

  • When you add a component to the canvas, it will only add it to the layout mode you're currently in. For example, if you add a component to the mobile layout, it will not show up on the desktop layout until you enable it.
  • You can rearrange components in mobile layout without affecting desktop layout (and vice versa). Retool treats each layout separately.
  • You can optionally hide or show any individual component from the mobile or desktop layout with the Show on desktop and Show on mobile toggles.
Example desktop layout.Example desktop layout.

Example desktop layout.

Example mobile layout of the same app. In this case, it's better to stack the components because of the narrower width.Example mobile layout of the same app. In this case, it's better to stack the components because of the narrower width.

Example mobile layout of the same app. In this case, it's better to stack the components because of the narrower width.


Did this page help you?