How To Make An AI Website Mobile Friendly

The timetable looked great on your laptop. Seven columns, Monday to Sunday, every class in its own neat block.

Then you opened it on your phone. Either the whole page shrank into text the size of a grain of rice, or it scrolled sideways and half the week fell off the edge.

That's the most common way an AI-built page fails, and the causes barely change from page to page. The model designs for the screen it imagines, which is a laptop, and nothing in a chat window makes it check a phone. Making an AI website mobile friendly almost never means starting again. It means six small fixes, half of them a line or two of CSS, applied in the right order.

It matters more than it feels like it should. StatCounter's worldwide figures have put phones at around half of all web traffic or more through 2026, and for a page people check on the way somewhere, like a class timetable, expect the share to be higher.

Here's how to test, the six fixes, and a yoga studio timetable from ChatGPT fixed start to finish. For the wider process, see how building a website with AI really goes.

Why Do AI Websites Break On Phones?

Because the model writes for a wide screen and never sees the page on a narrow one. It's working from text, not looking at your phone, so it falls back on layouts that assume plenty of horizontal room.

The six causes I see on almost every generated page:

1. No viewport tag. Without it, MDN explains, many phones draw the page on a virtual screen about 980 pixels wide and shrink the result to fit. Everything turns tiny, and any mobile styles the AI did write never kick in.
2. Fixed widths. A container set to exactly 1,100 pixels wide can't fit on a 360 pixel screen, so the page scrolls sideways.
3. Images with no maximum size. A photo 2,000 pixels wide pushes the page wider than the phone.
4. Wide tables and grids. Seven columns of anything can't fit side by side on a phone at a readable size.
5. A navigation bar that won't wrap. Six menu items in one row run off the right edge.
6. Tiny tap targets. Links and buttons sized for a mouse pointer, packed tightly together, are hard to hit with a thumb.

None of these are hard. They're just invisible from a laptop.

Is Your AI Website Mobile Friendly? Here's The Test

Find out by opening it on a real phone and swiping sideways on every section. If the page moves left or right at any point, something is wider than the screen, and you've found your first fix.

The full check takes about five minutes:

1. Use your own phone, on mobile data. A narrowed browser window is fine for checking widths, but it can't tell you how a thumb feels on the buttons.
2. Do the sideways swipe on every section from top to bottom. Note where the page moves.
3. Tap every button and link with your thumb. Anything you miss twice is too small or too close to its neighbour.
4. Turn the phone sideways and scroll through again.
5. Check other widths in your browser's device mode (in Chrome, open the developer tools and press Ctrl+Shift+M, or Cmd+Shift+M on a Mac), or paste the file into a free responsive tester to see phone, tablet and desktop widths side by side.

Write down what you find before you fix anything. One list, one fix at a time.

The Six Fixes, In The Order To Make Them

Each of these is one change to ask the AI for. Ask for them separately, in this order, and check the page between each one.

Add The Viewport Tag

This one line goes in the head of the page, and nothing else on this list works until it's there:

<meta name="viewport" content="width=device-width, initial-scale=1">

MDN's reference for the viewport meta tag and what happens without it

Swap Fixed Widths For Maximum Widths

A width that's fixed stays that size on every screen. A maximum width lets the box shrink when the screen is smaller:

.container {
  width: 100%;
  max-width: 1100px;
}

Let Images Shrink

One rule stops any image pushing the page wider than the screen:

img {
  max-width: 100%;
  height: auto;
}

Restack Wide Tables

Shrinking a seven-column table makes it unreadable. Wrapping it in a box that scrolls sideways is the quick fix. Restacking it into a list on narrow screens is the better one, and the walkthrough below shows both.

Let The Navigation Wrap

Below about 600 pixels wide, let the menu wrap onto two lines, or collapse it into a short list. For five or six links, wrapping is simpler and nothing can break.

Make Text Readable And Buttons Tappable

Body text at 16 pixels or larger, and buttons big enough for a thumb. Google's Lighthouse guidance says tap targets of 48 by 48 pixels never fail its check, and suggests about 8 pixels of space between them as a starting point. Google's guidance on tap target size and spacing

If you don't want to touch the code yourself, this table has the request to make for each symptom:

Fixing A Yoga Studio Timetable From ChatGPT

A yoga studio timetable is a good stress test, because it's a wide table and it's checked almost entirely on phones, usually by someone standing at a bus stop wondering whether they can make the 6pm class.

Here's a typical one. A small studio asks ChatGPT for a one-page site with its weekly timetable, and gets back a clean page with a real HTML table: a time column plus seven day columns, four time slots, around twenty classes. On a laptop it's perfect. On a 360 pixel phone, eight columns get about 45 pixels each, and "Vinyasa Flow" breaks into three lines of letters. That's what a ChatGPT website that's not responsive usually looks like.

There are two ways to make a table fit on mobile.

The quick fix: a scrolling box. Wrap the table in a container that scrolls sideways on its own, so the rest of the page stays put. It takes one prompt and keeps the grid. The catch is that someone looking for Thursday has to swipe for it.

The better fix: restack by day. Below 600 pixels, each day becomes its own short heading with that day's classes listed underneath. Nobody swipes, and "what's on tonight" takes a second to answer. This is what I'd pick for any timetable.

Here's the prompt for the restack:

Here is my complete website file. Change only the timetable.
Above 600px wide, keep the table exactly as it is now.
Below 600px wide, show it as a list grouped by day: each day
as a small heading, then that day's classes underneath with
time, class name and teacher on one line each.
Use CSS only, no JavaScript. Keep every other part of the page
exactly the same, and return the complete file.

ChatGPT will sometimes reply with only the new CSS and a note to "add this to your stylesheet". Ask for the complete file instead, because pasting a fragment into the wrong spot is the easiest way to break the page. If you do want to paste a fragment yourself, the safe way to change AI-written code by hand shows where the edges are.

Then test twice. Phone first, to see the new list. Then the laptop, to make sure the table there looks exactly as it did. Then fix the next item on your list: on this page that's usually the tiny "Book" links beside each class, followed by a six-item menu that runs off the screen.

One change per message, and the whole file back every time. The change prompt in the six prompts I use for every AI site is the general version of the one above.

Will A Different Host Make My Page Work On Phones?

No. The layout lives inside your file, and every host serves that file exactly as it is.

It's worth knowing, because "my site looks broken on mobile" often turns into shopping for a new host. Netlify, Cloudflare Pages, GitHub Pages and OxyPages will all show your phone the same page, because they all serve the same file. Fix the file and it works everywhere. Leave it broken and no host will save it.

What To Do Next

Open your page on your phone now and do the sideways swipe. Write down every section that moves, every button you miss and every table you can't read. Then work through the six fixes in order, one prompt each, testing on the phone and the laptop after every change.

When it passes the phone test, the hard part of making an AI website mobile friendly is done. If it's plain pages and nothing that needs a server, put it online and open the live link on your phone and repeat the swipe test on the real address. If your page needs logins or a database, that's an app, and an app platform is the right home for it.