Problem

Fine on desktop,broken on a phone.

Overflow, wrapped labels and cards that stack badly. Here are the usual causes and how to check three widths.

Pro

// the problem

What goes wrong

Fixed widths and long wordsA fixed width box, an unbroken long word or an image without a limit pushes the page past the screen edge.

Short labels that foldA button label or a chip that fits on a laptop wraps on a phone and makes the control look broken.

// what adams does

Opens the page at three widthsPro: 375, 768 and 1280 pixels, so the narrow case is looked at every time.

Names the elementPro: each hit lists the width, the problem and the element, such as overflow by 38 pixels in a card grid.

Repeats until cleanPro: fix, run again. A skipped visual check is reported as partial, not clean.

// worked example

Illustrative output.

~/project~/your-project · example

$ adams check http://localhost:3000/pricing

375px: overflow by 38px in the card grid

375px: label wraps in "Best value plan"

Fix the grid and shorten the label

✓ 3 widths checked, no problems

Lite is free. Pro adds this and the rest of the quality layer.

// faq

Can I check by hand?

Yes. Use your browser device mode at 375 pixels and scroll the whole page. The guide on checking mobile layout shows how.

Is a real phone needed?

It is worth one look before launch. A rendered width catches most layout faults, not every touch issue.

Is this free?

Page checks are Pro.

// related