Your Site Looks Fine on Your Phone and Broken on Everyone Else's

A law firm's site owner checked their new website design on their own phone, a fairly recent large-screen model, and it looked great: clean layout, readable text, nothing cut off. A client called a few weeks later to say the site was 'broken' on her phone: a navigation menu overlapping the page title, a button partially cut off the edge of the screen, a form field too narrow to see what was being typed into it. Both phones were technically 'mobile.' The site had only ever been tested on one specific screen size, and that one screen size happened to hide problems that showed up immediately on a smaller or differently proportioned device.

Why 'checked on my phone' isn't the same as 'responsive'

Responsive design means a layout adapts correctly across a wide range of screen sizes and proportions, not just the one device a designer or business owner happens to personally own. Phone screens vary meaningfully in width, height, and aspect ratio across different models and manufacturers, and a layout tuned to look right on one specific width can break in subtle or dramatic ways on a narrower or differently shaped screen. Testing on a single device gives false confidence; it confirms the site works on that device and says nothing about the many other screen sizes actual visitors are using.

The mistakes that show up most often

• Fixed-width elements (a fixed-pixel-width button, image, or container) that don't shrink to fit a narrower screen, causing horizontal scrolling or overlap
• Text sized in absolute units that becomes too small to read comfortably on a smaller screen, or too large and wraps awkwardly on a larger one
• Navigation menus that work on the specific device tested but overlap or misbehave at slightly different width breakpoints in between
• Images that don't scale down proportionally, either overflowing their container or looking pixelated when scaled awkwardly
• Touch targets that are appropriately spaced on one screen size but crowd together uncomfortably on a smaller one

Breakpoints leave gaps

Responsive design typically relies on breakpoints, which are specific screen widths where the layout deliberately changes to better fit that range of sizes. The problem is that breakpoints are chosen based on common device categories at the time a site is built, and they inevitably leave gaps: screen widths that fall between two breakpoints and inherit whichever layout is closest, sometimes awkwardly. A site tested only at the exact width of a designer's own phone, and again at a typical desktop width, can easily have an ugly or broken zone sitting at an in-between width that neither test happened to catch.

1. Test the site at several distinct widths, including a narrow older phone width and a wider modern phone width, not just one phone and one desktop size.
2. Use a browser's built-in device emulation tools to check common phone, tablet, and desktop sizes quickly without needing physical devices
3. Pay particular attention to the transition zones right around each breakpoint, where layout changes are most likely to look awkward
4. Check both portrait and landscape orientation on mobile, since landscape mode is often untested and can reveal cramped layouts
5. Ask a colleague or friend with a different phone model to load the site and report anything that looks off, rather than relying only on your own device

Images specifically deserve their own check

Beyond general layout, images have their own set of responsive pitfalls: an image that looks properly sized on a wide screen might get awkwardly cropped, stretched, or cause layout shift on a narrower one if it wasn't given proper responsive sizing rules. Modern responsive image techniques let a page serve an appropriately sized version of an image depending on the visitor's screen width, rather than sending the same large desktop-sized image file to every device regardless of how large it actually needs to display; this also helps page load speed on mobile connections, not just visual correctness.

Building a habit of testing beyond your own device

The fix is an ongoing habit of checking new pages and template changes across a handful of representative screen sizes before considering a change finished, rather than trusting that 'it looked fine on my phone' means it's fine everywhere. This is a small amount of extra time per change that prevents the far more common and embarrassing failure mode: a customer discovering a broken layout on their own device days or weeks after a change went live, with no one on the business side aware anything was wrong.

Responsive testing across real device sizes is part of the technical review in a free audit.

← Back to all articles