spanli

It looks wrong on my phone

What to do when something is cut off, cramped or unreadable on a small screen — and why Spanli usually catches it first.

Every build is checked at phone size before it is called done. Text running off the side, buttons too small for a thumb, writing too pale to read — those are found automatically, and serious ones on your home page have to be fixed before the build can finish.

So finding something wrong on a phone is unusual. When it happens, fixing it takes about thirty seconds.

Fix it from the phone itself

This is the fastest route, and it works because Spanli gets the screen size you were looking at along with the thing you pointed at:

  1. Open your project on the phone.
  2. Tap the thing that is wrong, in the preview of your site.
  3. Tap the pencil that appears beside it.
  4. Type what is wrong with it: "this runs off the edge", "these are squashed together", "I cannot read this against the background".

Because you were on a phone, the fix is made for the phone layout — not for a laptop where it already looked fine.

Fix it from a computer

You do not need the phone in your hand. Switch the preview to its phone-shaped view and you are looking at the same thing, at the same width. Point at the problem the same way.

Or just describe it

If you cannot point at it — it is the whole page, or it only happens while scrolling — say it in chat:

  • "The menu does not open on my phone."
  • "The home page scrolls sideways on a phone, something is too wide."
  • "The prices are unreadable on a small screen."

Ask for a look

You can also ask for the check to be run again on a page you are suspicious of:

"How does the pricing page look on a phone?"

You get back what it sees, and the same list of problems it would have caught during a build.

Things that are not a fault

  • A photo that fills the screen on a phone. Tall screens crop wide photographs. If you would rather it did not, say so.
  • The menu becoming a button. On a narrow screen the navigation collapses into a menu button on purpose. If it does not open, that is a fault — report it.
  • Slightly different spacing than the laptop. A phone layout is not a shrunken laptop layout; it is arranged for the narrow screen.