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.
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.
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.
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.
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.
Updated 11 months ago