---
title: How do I preview my site on mobile and tablet?
question: mobile and tablet preview
area: browser
order: 4
surface: desktop
audience: beginner
keywords: [mobile preview, phone, tablet, responsive, device mode, native, desktop, screen size, screenshot, camera, brightness, dim, annotate, red circle, feedback, point something out, why is my preview mobile]
related: [how-do-i-open-web-pages-and-tabs-in-the-preview, the-built-in-browser, how-do-i-float-or-maximize-the-preview]
updated: 2026-07-21
---

# How do I preview my site on mobile and tablet?

Click one of the four device buttons on the preview's toolbar, just to the right of the address bar: **Native**, **Desktop**, **Tablet**, or **Mobile**. **Tablet** and **Mobile** reshape the preview to a phone or tablet width so you can check how your layout looks on a small screen, right there in codus. It starts on **Desktop**.

Each button is a small shape. Hover to be sure which is which: the labels are Native, Desktop, Tablet, and Mobile. When you switch, codus reloads the page so it draws at the new size properly, which takes a second or two.

## What each mode is for

- **Desktop** is the normal, full-width view, and the one to leave it on for most work.
- **Tablet** shows a tablet-width layout.
- **Mobile** shows a phone-width layout.
- **Native** is a special case. It is not a size, and you rarely need it. It exists for websites that block automated browsers, where it helps the preview look like an ordinary visitor. On a narrow preview it can make a site jump to its mobile layout, so if your preview looks unexpectedly like a phone, check that you are on **Desktop** and not **Native**.

## The other toolbar buttons

The preview toolbar has a few more tools worth knowing:

- **Screenshot** (📷). Takes a picture of the current view, saves it as a PNG, and copies the file path to your clipboard so you can paste it. After it fires, its tooltip shows where the file was saved.
- **Brightness** (☼). Dims the preview for you only, down to 20%, with a **Reset** to return to full. It changes how the preview looks to you, not your actual site.
- **Draw a circle** (◯). Click it, then drag a red circle on the page to point something out. A **Feedback** box opens where you type what you want changed, and you send it, with the circled screenshot, straight to the agent. Click the button again to stop drawing.

## How do I know it worked?

The preview snaps to the new width and reloads. The button you picked stays highlighted so you can see which mode you are in.

## Common problems

**My preview looks like a phone and I did not ask for that.** You are probably in **Native** mode on a narrow preview, which makes some sites reflow to their mobile layout. Click **Desktop**.

**The page did not change after I switched size.** Give it a moment. Switching device mode reloads the page, and the new layout only appears once that reload finishes.

**The device buttons are greyed out.** They disable while a screenshot is being taken, or while you are in circle-drawing mode. Finish or cancel that first.