mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 14:07:26 +00:00
27 lines
942 B
Markdown
27 lines
942 B
Markdown
|
---
|
||
|
|
id: mobile-layout
|
||
|
|
title: Mobile layout
|
||
|
|
---
|
||
|
|
|
||
|
|
# Mobile layout
|
||
|
|
|
||
|
|
Mobile layout is activated when the width of the window is less than 600px.
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
Widgets can be shown on desktop, mobile, or both.
|
||
|
|
:::
|
||
|
|
|
||
|
|
|
||
|
|
<img className="screenshot-full" src="/img/tutorial/mobile-layout/mobile-layout.gif" alt="mobile layout" />
|
||
|
|
|
||
|
|
|
||
|
|
## Adding existing widget to mobile layout
|
||
|
|
Click on the widget to open inspector. Scroll down to the `layout` section and enable mobile layout. The width of the widget will be adjusted to fit the mobile layout.
|
||
|
|
|
||
|
|
## Adding a new widget to mobile layout
|
||
|
|
Switch the layout to mobile by clicking the button on the top navigation bar. Drag and drop a widget to the canvas. This widget will not be shown on desktop layout unless enabled from the widget inspector via the "Show on desktop" button manually.
|
||
|
|
|
||
|
|
:::tip
|
||
|
|
Width of the widgets will be automatically adjusted to fit the screen while viewing the application in app viewer.
|
||
|
|
:::
|