It's very common to want to have different styles apply to the page for mobile than would apply on desktop. Replo makes this easy, by allowing you to preview your pages on tablet and mobile views, and apply different style overrides to each.

Viewing the Page on Tablet and Mobile

To preview the page on tablet or mobile:

1. Open the page you want to view.
2. At the top of the editor, find the device preview buttons.
3. Click the button for the device you want to view.

To preview the page on a specific device size:

1. Open the page you want to view.
2. At the top of the editor, find the custom dimensions button.
3. Select the device you'd like to preview from the dropdown.

To preview the page on a specific pixel width:

1. Open the page you want to view.
2. At the top of the editor, find the custom dimensions button.
3. Type the pixel value into the input field.

Editing Mobile and Tablet Styles

When you edit mobile and tablet styles in Replo, styles for smaller devices override styles from larger devices, so that smaller devices always take priority. This means that you have a component on desktop with no padding, and on tablet you give it 24 pixels of padding, mobile will also have 24 pixels of padding (unless you set padding on mobile directly).

A very common case is to make a container which is horizontal on mobile be vertical on desktop: to do this, simply activate the mobile preview, then click the arrow button on the right side of the editor to make the container vertical.