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.