Make your site work on phones

Your site looks fine on a computer, but on a phone the text is tiny, things run off the edge, or the menu won’t open. This guide shows you how to find exactly what breaks, get the AI tool or site builder to fix it one problem at a time, and check the result on a real phone.

Before you start

• Your own phone, and if you can, a friend’s phone of a different make or size.
• The tool you used to build the site (an AI tool like ChatGPT, Claude, Lovable or Bolt, or a site builder like Wix or Squarespace).
• A note on your phone or a piece of paper to keep a list.
• A saved copy of the site as it is now. If you’re not sure how, ask your tool how to save a version you can go back to.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

1–3 hours

Skills you’ll need: Spot layout problems on a phone, describe them clearly, and test each change at different screen sizes.

I’ll do it myselfI’d rather get help

How this helps your brand

Readable pages and usable controls make it easier for phone visitors to understand your offer, call, or book. Checking real devices helps find obstacles before customers have to work around them.

1. 1

   Step 1: Open your site on your phone and use it like a customer

   Don’t just look at the home page. Do the things a customer would do: read the opening lines, open the menu, go to two or three other pages, tap your phone number, and fill in the contact or booking form.

   Hold the phone upright first, then turn it on its side and look again. Some problems only show up one way round.

   Then ask a friend to do the same on their phone. Phones come in different sizes, and some people set larger text, so their phone can show problems yours doesn’t.

   Tip: Use the web address your customers use, not a preview link from your editor. The preview doesn’t always match the real site.

2. 2

   Step 2: Write a list of everything that looks wrong

   Every time something bothers you, take a screenshot and add a line to your list saying which page it was on and what was wrong. These are the problems people run into most:

   • Text so small you have to pinch to zoom in to read it.
   • Pictures, tables or text that run off the side, so the page slides left and right.
   • Buttons or links so small or close together that you tap the wrong one.
   • A menu button that does nothing, or a menu that opens and won’t close.
   • Things overlapping, like text on top of a picture or a banner that covers the page.
   • Forms where the boxes are cut off or the Send button is hard to reach.

   Tip: Put the problems that stop people contacting or buying from you at the top of the list. Those get fixed first.

   Illustrated exampleLook for these differences on your phone

   Before

   Northline

   A home that feels like you.Thoughtful interiors for local homeowners.Request a quote

   Tiny text. Cut-off content.

   After

   Northline

   A home that feels like you.Thoughtful interiors for local homeowners.Request a quote

   Readable. Fits. Easy to tap.

3. 3

   Step 3: Describe one problem to your tool, with a screenshot

   Pick the top problem on your list. Tell your tool which page it’s on, what you did, what you expected, and what you saw instead. Add the screenshot. Most AI tools let you paste or attach a picture straight into the chat.

   “The menu is broken” leaves the tool guessing. “On my phone, on the home page, I tap the three lines at the top right and nothing happens” gives it somewhere to start. The prompt at the end of this guide is set up for exactly this.

   Say clearly that the computer version must stay exactly as it is. Otherwise a phone fix can quietly change how the site looks on a computer.

   Tip: Using a site builder rather than an AI tool? Many builders have a separate phone view in the editor, usually a small phone icon near the top. Fix it there, and check whether your change also affects the computer view.

   Illustrated exampleTurn a screenshot into a useful problem report

   Northline1

   A home that feels like you.Request a quoteExample screenshot

   Page and phone

   Home · iPhone · upright

   What I did

   1 Tapped the menu at the top right

   What I expected

   The navigation links to open

   What happened

   Nothing opened

4. 4

   Step 4: Fix one thing, then check it on your phone

   Let the tool make the change, then look at that page on your phone again before you ask for anything else. If you change five things at once and something new breaks, you won’t know which change caused it.

   If your phone still shows the old version, close the page and open it again. Phones sometimes keep an old copy of a page for a short while.

   When the fix works, tick it off your list, save a version, and move on to the next problem.

   Tip: If the tool’s fix doesn’t work after two tries, go back to your saved version and describe the problem again in different words, with a fresh screenshot.

5. 5

   Step 5: Do a final check on both phones and a computer

   Once your list is empty, go through step 1 again on your phone, upright and on its side. Then ask your friend to do the same on theirs.

   Finally, open the site on a computer and click around. You’re checking that none of the phone fixes changed the computer version.

My website looks wrong on phones and I need your help fixing one problem at a time.

The page: [page name or web address]
What I did on my phone: [what you tapped or scrolled]
What I expected: [what should have happened]
What I saw instead: [what went wrong, e.g. text too small, page slides sideways, menu won’t open]
Phone I used: [make and model, e.g. iPhone or Samsung Galaxy], held [upright or on its side]

I’ve attached a screenshot. Please fix only this one problem. Keep the computer version of the site exactly as it is, and don’t change wording, colours or anything unrelated. When you’re done, tell me in plain English what you changed and exactly how to check it on my phone.