> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview on phones and tablets

> See how a page looks on a phone, a tablet or a big screen, without leaving your computer.

Most visitors see your site on a phone. Device preview shows the page at a phone's, a tablet's or a big screen's size, right in your browser. Check it there before you publish.

 **Who can do this:** anyone who can edit pages.

## Before you start

* Sign in and open the page on your site. Device preview works whether you're editing or not.
* The device buttons sit at the left of the edit bar, beside **Select Breakpoint**, the menu where you choose a screen size to preview.
* In a narrow browser window the device buttons step aside to make room, and **Select Breakpoint** shrinks to a laptop-and-phone icon. It opens the same list.
* On a phone the device buttons aren't in the bar: you're already looking at the page on a phone.

## Preview on a device

**1. Choose a device button**

There are 4, from left to right:

* a phone (iPhone 17)
* a tablet (iPad Pro 11″)
* a laptop (MacBook Air 13″)
* a desktop screen (Desktop — FHD 1080p)

**2. Look through the page**

The page shrinks into a frame the size of that screen and rearranges itself the way it does on the real device. Scroll inside the frame to see the whole page.

![Parker's home page in the iPhone 17 frame: the header collapsed to its menu button, the Hero headline wrapping onto several lines.](https://mintcdn.com/fetchski-attract-api/DSJs5HmTF1-gpNT3/images/cms/guides/build-pages/preview-on-devices/guides-build-pages-device-preview-phone-light.png?fit=max\&auto=format\&n=DSJs5HmTF1-gpNT3\&q=85\&s=544c0ba3bbbe7ce2ee8bffb3d042590b)

The page at a phone's size, as a visitor on that phone sees it.

## Choose another device

**1. Choose Select Breakpoint (or the name of the device you're on)**

**2. Choose a device from the list**

![The Select Breakpoint list open, from Samsung Galaxy S26 down to the desktop sizes, with the device icons.](https://mintcdn.com/fetchski-attract-api/DSJs5HmTF1-gpNT3/images/cms/guides/build-pages/preview-on-devices/guides-build-pages-device-preview-list-light.png?fit=max\&auto=format\&n=DSJs5HmTF1-gpNT3\&q=85\&s=f11c8fd9b48736809550cd633f7f90ac)

Select Breakpoint lists every screen size you can preview.

The list runs from the narrowest screen to the widest:

* **Phones:** Samsung Galaxy S26, iPhone 17, Google Pixel 10 Pro, Google Pixel 10, Google Pixel 10a, Samsung Galaxy S26 Ultra, Google Pixel 10 Pro XL and iPhone 17 Pro Max.
* **Foldable:** Pixel 10 Pro Fold (Cover) and Pixel 10 Pro Fold (Open).
* **Tablets:** iPad Pro 11″ and iPad Pro 13″.
* **Laptops:** MacBook Air 13″ and MacBook Pro 16″.
* **Desktop screens:** **Desktop — FHD 1080p** is an ordinary computer screen and the one to check first. **Desktop — QHD 1440p** is a larger monitor, **Ultrawide — UWQHD** an extra-wide one, and **Ultra HD — 4K** the biggest. On the wide ones, your content stays centered at your site's width.

## Go back to full size

Choose **Clear Breakpoint** (the × beside the device name) to stop previewing a screen size. The page fills your window again.

The preview stays on while you move between pages in the same browser tab. Clear it when you're done.

## Use the keyboard

Press P, then a number:

* **P, 1** to **P, 4**: the 4 device buttons, from phone to desktop.
* **P, 0**: back to full size.

## What to check

* **The menu.** On narrow screens your header menu folds into a menu button. You choose the screen size where this happens in **Site design** → **Header: Layout** → **Collapse nav to menu at**. See [Header](https://docs.fetchski-attract.com/guides/site-design/header.md).
* **Columns.** On tablets, a Layout's columns sit 2 per row. On phones they stack. See [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md).
* **Long words and headlines.** A headline that fits on a computer can wrap onto many lines on a phone. Shorten it if it looks crowded.
* **Hidden columns.** A column set to hide on tablets or phones disappears in those previews.

## Good to know

* **Most animations don't play while you're signed in.** Sections that fade in or count up as you scroll show finished. Visitors see the animations. Scrolling strips and carousels, such as moving logos, still move.
* **It's a close match, not the real device.** Touch, the device's own fonts and its browser's toolbars aren't part of it. For a last check, open the published page on your own phone.
* **Only the page changes size.** The toolbar and edit bar stay full width.

## Related

> [card] [Side-by-side layouts](https://docs.fetchski-attract.com/guides/build-pages/side-by-side-layouts.md)
>
> how columns fit smaller screens.

> [card] [Header](https://docs.fetchski-attract.com/guides/site-design/header.md)
>
> when the menu folds into a button.

> [card] [Add, move and remove sections](https://docs.fetchski-attract.com/guides/build-pages/add-move-remove-sections.md)
>
> change what's on the page.

> [card] [Drafts, publishing and scheduling](https://docs.fetchski-attract.com/guides/build-pages/publish-and-schedule.md)
>
> make your changes live.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.