Most people will open your website on a phone: from your Instagram bio, from a link a friend sent them, from a search. So it matters how your pages look on a small screen, not only on your computer.

The good news: you build each page once. The phone shows the same blocks, with the same words, photos and colors. Only the layout changes, so that everything fits a narrow screen. This guide shows you how to check your pages on a phone and how to fix a block that doesn't look right.

See the page as a phone

Open the page in the editor.
In the middle of the top bar there are three small screens: Desktop, Tablet and Mobile. Click Mobile (the phone).
The page narrows to the width of a phone. Scroll it from top to bottom, as a visitor would.
Click Desktop to go back to the full width.

You can keep editing in this view: change a text or a photo here and it changes on the computer too, because it's the same block.

Tip: once the page is published (see Publish your website), open your site on your own phone too. Nothing beats the real thing.

What changes on a phone, and what doesn't

The same everywhere: the blocks and their order, the texts, the photos, the buttons and their links, the colors and the fonts.
Only on the phone: where things sit and how big they are. Columns go one under the other, photos take the full width, big titles get smaller.

So you never write a page twice. If you change a title on the computer, the phone shows the new title too.

Ready-made blocks: nothing to do

Ready-made blocks rearrange themselves for phones. Two columns become one, photos and texts resize to fit the screen.

A few of them also have a phone setting in their options (the Edit button), for example Mobile Columns, to show one or two items side by side on a phone. See Edit text, photos and buttons.

Freeform blocks: give them a phone layout

In a Freeform block you place every element by hand, so the app can't guess how you want it on a phone. Until a block has its own phone layout, the phone shows the computer layout made smaller, which can make the text tiny.

Click the Freeform block to start editing it.
In the bar at its top right corner, click Mobile (the phone icon).
Choose how to start:
- Auto — the elements are put one under the other, in a single column that fits the phone. The quickest way, and often all you need.
- Custom — the phone starts from a copy of the computer layout, and you arrange it by hand.
The editor switches to the phone view. Move and resize the elements until the block looks right. These changes are for the phone only.
To go back, click Desktop in the top bar.

Once a block has its phone layout, the same Mobile button offers Edit mobile (or Desktop, if you are already in the phone view) and Remove mobile version, which goes back to the smaller computer layout.

Good to know: the phone layout only decides where the elements sit and how big they are (text size included). Words, photos, colors and fonts stay shared: change them on either view and both update. An element you add on the computer also appears on the phone, at the bottom of the block; move it where you want it.

Good habits

Check every page on Mobile before you publish. It takes a minute and it's what most visitors will see.
Keep titles short. Four words on one line on a computer can become three lines on a phone.
Give every Freeform block a phone layout. Start with Auto and adjust from there.
Look at your buttons. On a phone they must be easy to tap and not hidden behind a photo.