How I Fix AI-Built Websites on Mobile With Screenshots

One thing I keep noticing about building websites and web apps with AI is that the desktop version usually looks pretty good before the mobile version does.

The AI has room to work with on a large screen. Then I open the same thing on my phone and find a headline wrapping in a strange place, a button hanging off the edge, a floating object covering the text, or a section with a lot of empty space that did not exist on desktop.

I do not try to translate all of that into developer language. I take a screenshot and show the AI exactly what I am seeing.

The desktop version is not the finished version

A page loading on a phone does not mean the mobile design works. I have learned to look at it like a real visitor would: hold the phone normally, scroll at a normal pace, tap the links, and notice the places where the experience feels awkward.

This has happened on H/CTOR, LinesFly, HuddlePops, and now PostCue. It is not a one-time fix. It is part of the build.

My screenshot workflow for mobile fixes

1. Open the live page on my phone.I use the actual device instead of assuming a narrow desktop window tells me everything.
2. Scroll slowly and take screenshots.I capture the exact moment something looks wrong, including enough of the page for the AI to understand where it is.
3. Send the screenshot into the same build conversation.The project context matters. I want the AI to connect what it sees to the code it has already been working on.
4. Describe each problem out loud.I usually speak to it. I say what is cut off, what moved, what overlaps, and where I expected the line to break.
5. Ask it to preserve what already works.A mobile fix should not quietly break the desktop version. I say that directly.
6. Publish or preview, then check again.The first fix is not always the final fix. I repeat the loop until the page feels right on the actual phone.

A mobile website fix prompt you can use

This is the basic structure. The important part is replacing the brackets with what you can actually see.

Look at the attached mobile screenshot of [page or section].

On mobile, I can see these problems:
1. [Describe the first visible issue.]
2. [Describe the second visible issue.]
3. [Describe the spacing, line break, overlap, or sizing issue.]

I want it to look like this instead:
- [Describe the intended layout in plain English.]
- [Say exactly where the line should break, if that matters.]
- [Say which element should move, shrink, stack, or disappear.]

Inspect the existing responsive styles before changing anything.
Fix the mobile layout without changing the desktop design.
Then tell me what you changed and what I should test on my phone.

Be painfully specific

“Fix mobile” is too broad. The AI might see ten possible improvements and choose the three you did not care about.

I get better results when I say things like:

• Keep “what I” together on the second line.
• The image is wider than the screen and creates horizontal scrolling.
• The yellow shape should sit behind the portrait, not cover the paragraph.
• The navigation works on the homepage but stops responding after I open another page.
• This section has too much empty space between the heading and the paragraph at this width.

You do not need the correct CSS term. You need to describe the evidence clearly.

What I check before I call the mobile version done

A few quick questions