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

# Check Your Site on Phone and Tablet

> Preview each page at phone and tablet sizes, spot layout problems, and ask the AI to fix them

Many of your visitors will see your site on a phone. The preview can show any page at phone and tablet sizes, so you can catch problems before visitors do.

In this example the Northwind menu looked fine on a desktop and a phone, but two links ran into each other on a tablet. We found it in the preview and had the AI fix it.

## Switch the preview size

**1. Use the device buttons**

Above the preview are three buttons: **Desktop view**, **Tablet view (768px)** and **Mobile view (375px)**. Click one to resize the preview.

![The three device buttons above the preview with the phone button outlined, next to the page picker](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-01-toolbar-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=9be2488487a90e635d6c6ef34e611605)

![The builder with the Mobile view button outlined in the toolbar above the preview](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-01-toolbar.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=178187bdd0eaf085452da5c2270a75da)

**2. Look at the page at phone size**

The page appears at phone width, and the width shows under it (**375px**). Scroll and click around just as you would on a phone.

![The builder showing the Northwind home page in a phone-sized frame, 375px wide](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-02-phone.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=c49cf5967a02f2e99da561a24a95068b)

**3. Check every page you changed**

Use the page picker to open other pages at the same size. Here is the new FAQ page from [Add a New Page](/how-tos/site-builder/add-a-page) on a phone:

![The Northwind FAQ page in a phone-sized frame](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/page-08-faq-phone-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=2a4e37d6892cdb7341d934af4e429b19)

> [!TIP]
>
> Need another size? In Tablet or Mobile view, drag the handles on either side of the preview to make it narrower or wider.

## Fix a problem you find

**1. Spot the problem**

At tablet size, the Northwind menu was too crowded: **About** and **Wholesale** ran together into one word.

![The builder showing the Northwind home page at tablet size, 768px wide, with the Tablet view button outlined](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-03-tablet.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=8d2948596d4416ce839b3101b8658ac2)

![The tablet menu bar with the words About and Wholesale touching, outlined](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-04-tablet-problem-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=087079c3e309c6506518ccd88657a879)

**2. Tell the AI what you saw**

Say which screen size has the problem and what looks wrong:

```text wrap theme={null}
On tablet-sized screens, the About and Wholesale links in the top menu run together. Fix the menu at that size so every link has room.
```

![The chat box with the tablet menu request typed in](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-05-fix-request-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=357857300e004c833e43399180576fd9)

**3. Check the fix at the same size**

The AI changed the menu so tablets get the menu button (the three lines on the right), the way phones do. The desktop menu stayed the same.

![The tablet menu bar now showing the Northwind logo and a menu button with three lines](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-06-tablet-fixed-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=adfc90daefe6f951db0bff9b355f5c73)

![The opened tablet menu listing Shop, Subscribe, Locations, Blog, About and Wholesale, with an orange Shop Beans button](https://mintcdn.com/locusdigital/HHtyEzypiRRWLDpM/images/how-tos/site-builder/dev-07-tablet-menu-open-closeup.webp?fit=max\&auto=format\&n=HHtyEzypiRRWLDpM\&q=85\&s=b6a099566159055dfa2df9f8e8efef67)

> [!NOTE]
>
> The preview frames show your pages at real phone and tablet widths, but nothing beats a real device. After you [publish](/how-tos/site-builder/publish), open your site on your own phone too.

## Next

> **[6. Undo a change](/how-tos/site-builder/undo-a-change)**
>
> Take back a change you do not like, and save a restore point before a big change.


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