> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.maglr.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Edit the mobile version of a grid scene

|| Grid mode is in beta and available in selected accounts only.

The mobile version of a grid scene is generated from the desktop version: it has the same content and structure, on a page grid of 6 columns by default. You check it in the mobile view and change what needs to be different on mobile, such as the order of items. A change you make on mobile applies to mobile only, and you can reset it to the desktop version.

## Switching to the mobile version

To see and edit the mobile version of a grid scene, click `Mobile` in the left panel. To go back, click `Desktop`.

## Mobile overrides

The mobile version follows the desktop version until you change something on mobile. Changes on mobile are called overrides:

* An item whose order or visibility differs from desktop is marked with a blue dot on its marker in the structure rail.
* A text you change on mobile is unlinked from its desktop version.
* Each override can be reset, so the item follows the desktop version again.

## Using the structure rail

The structure rail is the row of markers beside the mobile canvas. Each marker stands for an item on the page: a row, column or element.

* Hover a marker to see its toolbar with the actions for that item (tooltip `Open structure`).
* Click a marker to select its item.

![The structure rail beside the mobile canvas: markers for the selected heading, its columns and its row, with the column's marker turned into its toolbar](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/12-01-structure-rail_1t7qbl6.png =1000xauto)

## Changing the order of items on mobile

To move an item up or down on mobile only:

1. Click `Mobile` in the left panel.
2. In the structure rail, hover the marker of the item.
3. Click `Move up (same level)` or `Move down (same level)`.

![Switching to Mobile, selecting a heading, hovering its column's marker and clicking Move up (same level): the titles move above the video](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/12-02-move-up_12qfv5r.gif =1000xauto)

"Same level" means the item moves among the items in the same row or column. It doesn't move into another row or column.

## Reversing the order of items on mobile

You can reverse the order of all items in a row or column on mobile, for example to show an image above its text instead of below it. This is called a flip.

1. In the structure rail, hover the marker of the row or column.
2. Click `Reverse vertical order of rows (mobile)` or `Reverse horizontal order of children (mobile)`. Only the option that applies to the selected item is shown.

The item gets a `Vertical flip` or `Horizontal flip` label on the canvas. To undo the flip, click `Reset column order to default` or `Reset row child order to default` in the same toolbar.

## Hiding an item on mobile or on desktop

You can hide a row, column or element on mobile only, for example a large image that doesn't work on a small screen. You can also hide an item on desktop only, for example a shorter version of a text that is meant for mobile.

To hide an item on mobile with the structure rail:

1. Click `Mobile` in the left panel.
2. In the structure rail, hover the marker of the item.
3. Click `Hide on mobile canvas`.

![Switching to Mobile, selecting a photo, hovering its marker and clicking Hide on mobile canvas: the photo disappears and the rail shows Image hidden](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/12-04-hide-on-mobile_10i1wkn.gif =1000xauto)

A hidden item shows as a `hidden` label on the mobile canvas. Click the label to preview the item in place; to show it again, hover its marker and click `Show on mobile canvas`.

You can also hide an item with `Visible on` in the item's settings. Click `Desktop` or `Mobile` to hide or show the item on that device. In the Design view this is in the `Position` block in the right panel; in the Build view, click `More actions` in the toolbar above the item to open the settings bar.

## Seeing what differs from desktop

An item that differs from desktop has a blue dot on its marker in the structure rail. Hover the dot to see what changed, for example `Position changed`, `Columns mirrored` or `Child order reversed`.

When an item's order or text differs from desktop, its marker in the structure rail shows a warning. Hover the warning to read it, for example `Order differs from desktop on mobile. Reset this item to restore its desktop position.`

## Resetting the mobile version to desktop

To make an item follow the desktop version again:

1. In the structure rail, hover the marker of the item.
2. Click `Restore this item to its desktop position`.

To reset all items in the same row or column at once, click `Restore all items at this level to desktop order`.

For a setting you changed on mobile in the item's settings, click the reset button next to it (tooltip `Remove overwrite`).

## Editing text on mobile

On mobile, a text follows its desktop version. Unlock it when it needs to be different on mobile, for example shorter for a small screen. To change it on mobile only:

1. Click `Mobile` in the left panel.
2. Double-click the text. The message `Unlock to edit` appears: `The element will be unlinked from the desktop version.`
3. Click `Unlock`.
4. Edit the text.

![Switching to Mobile, double-clicking a text, clicking Unlock and deleting its last sentence: the Reset element bar and a warning appear](https://storage.crisp.chat/users/upload-1/plugin/-/4/b/a/a/4baaf9a6d64adc00/12-05-unlock-text_1wv2t0v.gif =1000xauto)

From then on, changes to the text on desktop no longer reach the mobile version. A warning shows: `Text is overwritten on mobile. Reset on mobile layout to sync.`

To make the text follow the desktop version again, select it on mobile and click `Reset` in the `Reset element` bar that appears (`Reset this element back to the desktop version.`).

## Moving items by dragging on mobile

In the Design view, you can also drag items on the mobile canvas. Moving an item within the same row or column changes the mobile version only.

|| Moving an item into another row or column on mobile also changes the desktop version. The editor then shows: `Moving elements to another mobile flow also changes the desktop structure.`

## The mobile version in the Build and Content views

* **Build view:** you can't drag items on the mobile canvas. Change the order with the structure rail instead.
* **Content view:** the structure rail shows where the mobile version differs from desktop, but its actions are not available. See [Edit content in the Content view](https://help.maglr.com/en/article/edit-content-in-the-content-view-m6cbjw/).

For what each view can do, see [Roles and views in the editor](https://help.maglr.com/en/article/roles-and-views-in-the-editor-13gasx2/).

## Frequently asked questions

### Do I need to design a separate mobile version of a grid scene?

No. The mobile version of a grid scene is generated from the desktop version. You only change what needs to be different on mobile, such as the order of items.

### Can I hide an element on mobile only?

Yes. In the mobile view, hover the element's marker in the structure rail and click `Hide on mobile canvas`. You can also use `Visible on` in the element's settings to hide it on mobile or on desktop. The element stays on the other device.

### Why did my change on mobile also change the desktop version?

Moving an item into another row or column on mobile also changes the desktop structure. Only moving an item within the same row or column, or reversing the order of items, changes the mobile version alone.

### How do I make the mobile version follow desktop again?

In the mobile view, hover the item's marker in the structure rail and click `Restore this item to its desktop position`. To reset a whole row or column, click `Restore all items at this level to desktop order`.