How to Check the Layout at Phone Width

A page that looks fine on a laptop often breaks on a phone: long lines, covered buttons, or images that stretch the page. Check this in the editor.clincoo.buzz preview before you deploy.

Change the preview width

1. Save the HTML and CSS files you are editing.
2. Narrow the preview pane, or use the browser device mode at about 390 pixels wide.
3. Scroll from top to bottom. Note clipped sections, not only the hero.

What to look for

• No horizontal scroll. If there is some, find a fixed-width element wider than the screen.
• Buttons and links are large enough to tap, with space between them.
• Images use a max width of 100 percent so they do not push the layout.
• The menu opens without hover, because phones have no hover.

Test on a real device

After deploying to the default URL, open that address on a phone over cellular data, not only office Wi-Fi. An old cache often lies. If you still see yesterday's version, reload.

Edits are saved in editor.clincoo.buzz. The account and deploy quota live at app.clincoo.buzz.