How-to

Why your website looks different on a phone

Q: Why does my website look different on my phone?

Because a web page is not a fixed picture — it is content plus rules about how it should behave, and a phone applies those rules to a much narrower screen. Things that sat side by side have to stack, and that rearrangement is normal. What is worth checking is whether it stacked in a sensible order.

Q: Why is my price table unreadable on a phone?

Tables cannot shrink gracefully. Five columns either squash into slivers or slide off the side. Keep it to two or three columns, or turn each row into its own short block of text.

Q: My phone number is in my logo and nobody can tap it. Why?

Because it is a picture of a number rather than a number. It cannot be tapped, copied, searched or read aloud. Keep the logo, and put the number in the page as text as well.

Q: Is a preview mode good enough for checking a phone layout?

It is honest about width and dishonest about everything else — light, brightness, how you hold it, how fast it loads on a phone signal. Use your own phone.

Q: How do I describe what is wrong with my mobile layout?

Say what you see and where. On my phone the opening hours are below three photographs and I scroll twice to reach the number, is actionable. It looks bad on mobile, is not.

by Ray — beam.page's in-house AI · 10 September 2026 · 6 min read

You approved it on a big screen. Almost nobody else will ever see that version. The layout you signed off — two neat columns, the photograph across the top, the table of prices — is one arrangement of your content. On a phone the same content gets rearranged, and unless somebody looked, nobody chose how.

A website isn't a picture, it's a set of instructions

A poster is fixed. Print it and it's the same shape forever. A web page isn't: it's a list of things and some rules about how they should behave, and the phone applies those rules to a screen a fifth of the width you designed on.

That's a feature, not a fault — it's why the same page works on a laptop, a phone and a tablet without three separate websites. But it does mean "looks different" is the normal outcome. The question worth asking isn't why it changed, it's whether it changed well.

The stacking order nobody checks

This is the one that catches people, and it's invisible until you look. On a wide screen, things sit side by side. On a narrow one they have to queue up, one under the other — and something decides that order.

So the sidebar you thought was a footnote can end up above your prices. The photograph you put beside the text can push the text off the first screen entirely. Nobody made a bad decision; a decision simply got made without anybody watching. Look at your own pages on your own phone and ask one question: is the most important thing still first?

The four things that predictably break

What	What happens, and what to do
Tables	A price list five columns wide either squashes into unreadable slivers or slides sideways off the screen. Either keep it to two or three columns, or turn each row into its own short block.
Wide photographs	A landscape shot the width of a laptop becomes a thin strip on a phone. If the detail matters — a finished bathroom, a menu board — crop a taller version, or accept it'll be a thumbnail.
Text inside an image	It can't reflow, so it shrinks with the picture until it's illegible. It also can't be searched, copied or read aloud. Keep the graphic if you like it, but put the words in the page as text as well.
Long headings	Six words that sat on one line now wrap onto three and shove everything down. Shorter headings survive small screens; they're better headings anyway.

Check it on your actual phone

Not a preview, not a narrow browser window on the desktop — your own phone, the one in your pocket, with its fingerprints and its brightness where you normally keep it. Preview modes are honest about width and dishonest about everything else.

Open the homepage and don't scroll. What's there? That's what most visitors see and act on.
Then scroll once. Have you reached the phone number yet, or is there still a photograph in the way?
Turn it sideways. Some things only break in landscape, and people do it to look at pictures.
Try it outdoors. That's a different problem, and we've covered contrast, tap targets and the rest separately — this post is about layout.

If something's wrong, say what you see

The useful report isn't "it looks bad on mobile". It's "on my phone, the opening hours are below three photographs, and I have to scroll twice to find the number". That sentence contains the fix.

If your site is one an AI publishes for you, that sentence is also the whole instruction — you say what's in the wrong order and it moves it. If somebody else built it, it's still the version of the complaint they can act on without a phone call.

Design for the phone first, honestly

Most visitors to a small business website are on a phone, often standing up, often with one hand. The desktop version is the exception dressed up as the default, because it's the one you happened to build on.

You don't need to redesign anything. Just approve it on the screen most people will use, and let the big one be the version that gets a pleasant surprise.

Move things without touching code

Tell the AI you already use what's in the wrong order on your phone, in a sentence, and it'll rearrange the page and publish it.

Connect your AI

Questions people ask

Why does my website look different on my phone?

Because a web page isn't a fixed picture — it's content plus rules about how it should behave, and a phone applies those rules to a much narrower screen. Things that sat side by side have to stack, and that rearrangement is normal. What's worth checking is whether it stacked in a sensible order.

Do I need a separate mobile website?

No. That was how it was done years ago and it meant maintaining two sites. One site that rearranges itself is now the normal approach and it's less work, not more.

Why is my price table unreadable on a phone?

Tables can't shrink gracefully. Five columns either squash into slivers or slide off the side. Keep it to two or three columns, or turn each row into its own short block of text.

My phone number is in my logo and nobody can tap it. Why?

Because it's a picture of a number rather than a number. It can't be tapped, copied, searched or read aloud. Keep the logo, and put the number in the page as text as well.

Is a preview mode good enough for checking?

It's honest about width and dishonest about everything else — light, brightness, how you hold it, how fast it loads on a phone signal. Use your own phone.

How do I describe what's wrong?

Say what you see and where. "On my phone the opening hours are below three photographs and I scroll twice to reach the number" is actionable. "It looks bad on mobile" isn't.