It looks perfect on your laptop. Then you open it on your phone and it is a mess — text spilling off the edge, buttons too small to tap, images overlapping, and that telltale sideways scroll that should never exist. Same website, same page, completely different experience.
This matters more than it might seem, because most of your visitors are on phones, and so, in effect, is Google. A site that falls apart on mobile is losing customers and search rankings at the same time.
Why it happens at all
A modern website is supposed to be responsive: it rearranges itself to fit whatever screen it is on, so one page adapts cleanly from a wide monitor down to a narrow phone. When a site looks broken on mobile, it usually means it is either not responsive at all, or responsive with specific things that were never checked at phone size. Here are the usual culprits.
Reason 1: an old, fixed-width design
Websites built years ago were often designed for a fixed desktop width, from before phones mattered. On a small screen the browser just shrinks the whole desktop layout down, leaving everything tiny, or keeps it full size and forces you to scroll sideways. No amount of small tweaks fully fixes this; the foundation itself assumes a big screen.
Reason 2: images wider than the screen
A single image that is wider than the phone screen will push the whole page wider than the phone, creating horizontal scroll and throwing the layout off. One oversized image, embedded video or table is often all it takes. These are usually quick, specific fixes once you find them.
Reason 3: text and buttons sized for a monitor
Text that reads comfortably on a large screen can be too small to read on a phone, and buttons or links placed close together on a desktop become impossible to tap accurately with a thumb. Good mobile design uses readable text and generous, well-spaced tap targets — small details that decide whether a phone visitor stays.
Reason 4: pop-ups that trap people
A pop-up that is awkward on desktop can be a dead end on mobile, where the close button sits off-screen or is too small to hit. The visitor cannot read the page or leave the pop-up, so they leave the site. Google also dislikes intrusive mobile pop-ups and can penalise them.
Reason 5: things that simply do not fit
Wide tables, embedded maps, and third-party widgets often assume a desktop and overflow on a phone. Each needs to be made to scroll within its own box or to restack for small screens, rather than breaking the whole page around it.
How to check it properly
Start with your own phone — it is the honest test. Then, on a desktop, use your browser’s device preview (in Chrome: right-click, Inspect, then toggle the device toolbar) to see several screen sizes at once. Finally, check the Mobile Usability feedback in Google Search Console, which lists specific problems Google has found on real pages.
Fixing it
If the site is fundamentally responsive and only a few things overflow, targeted fixes will sort it. If it was built on an old fixed-width foundation, a rebuild is usually cheaper and better than endlessly patching a structure that fights you — one of the clearer signs a site needs a redesign. Either way, mobile is not an afterthought; it is where most of your visitors and most of Google already are, and building for it first is simply what a site done properly looks like today.
