The most common way a business owner finds out their website looks broken on mobile is when a customer mentions it — "I tried to look you up on my phone but the site was all over the place." By then, the visitor who didn't say anything has already left and called someone else.
More than 60% of web traffic comes from mobile devices. Google ranks your site based on the mobile version first — not the desktop version. A website that works on a laptop but breaks on a phone is not a minor inconvenience. It is the version most people see, and the version Google uses to determine your search ranking.
The good news is that most mobile display problems come from a handful of specific causes. Here is what is actually happening — and how to know which problem you have.
Cause 1: No responsive design — the layout was built for desktop only
A desktop screen is typically 1280–1920 pixels wide. A phone screen is 375–430 pixels wide. A layout designed for desktop — with a three-column structure, wide images, and text set at fixed widths — will either shrink everything to illegible size on a phone, or force horizontal scrolling because the content is wider than the screen.
Responsive design is the set of CSS rules that tell the browser how to rearrange the layout at different screen sizes. A properly responsive site collapses multi-column layouts into single columns on mobile, stacks navigation links into a menu, and adjusts font sizes so text is readable without zooming. A site built without these rules has no fallback for small screens.
This is the most common root cause for websites that were built more than five years ago, or were built quickly with tools that did not generate responsive CSS. It usually cannot be fixed by patching a few styles — the layout structure itself needs responsive rules added.
Cause 2: Images sized for desktop served to a phone screen
A hero image sized at 1400 pixels wide looks correct on a desktop. On a phone screen 400 pixels wide, the browser shrinks it down visually — but it still downloads the full 1400-pixel file. This makes the page significantly slower on mobile, and on some layouts causes the image to overflow the screen before the scaling rule kicks in.
The fix is using responsive images: the HTML srcset attribute tells the browser to download a smaller version of the image when the screen is small. A 400-pixel-wide version of the hero image is one-tenth the file size of the 1400-pixel version. Serving the right size to the right device cuts load time and prevents overflow layout issues simultaneously.
Cause 3: Text and buttons too small to read or tap
Desktop screens are typically viewed from 50–70 centimeters away. Phone screens are held at 30–40 centimeters. Text that looks readable at a desktop distance may require pinching to zoom on a phone. Buttons that appear well-spaced on a wide screen may be too close together for a fingertip to tap accurately.
Google's mobile usability guidelines specify a minimum tap target size of 48 by 48 pixels for interactive elements. A font size below 14 pixels is flagged as too small to read. If your site was designed at desktop scale and the styles were never adjusted for mobile, both problems are likely present.
This is fixable with CSS changes that set font-size and button dimensions using media queries — rules that apply only when the screen is below a certain width. It does not require a full rebuild, but it does require someone to write the responsive CSS correctly.
Cause 4: A pop-up or overlay that takes over the phone screen
Pop-ups that work on desktop — newsletter signups, cookie banners, chat widget launchers — often cover the entire mobile screen with no visible close button. On a phone, a modal that opens to 80% of the viewport leaves 20% visible, and the X button is frequently cropped off screen or too small to tap.
Google penalizes mobile pages where an interstitial blocks the main content immediately on load. If your site has a pop-up, it needs to either be suppressed on mobile or built with a mobile-safe design — a banner at the top or bottom rather than a full-screen overlay, and a close button large enough to tap without zooming.
How to check your mobile display right now
The fastest check is to open your website on your own phone and navigate it as a customer would. Try reading the main text without zooming. Tap every button and link. Submit your contact form. If any step requires pinching, scrolling sideways, or tapping twice to hit a target, you have found a real problem.
For a more systematic view: in Google Chrome on a desktop, press F12 to open developer tools, then click the phone icon in the top left to switch to mobile emulation. Set the device to "iPhone SE" or "Galaxy S20" and reload. This shows you what your site looks like at common phone dimensions without needing a second device.
Google Search Console's Mobile Usability report lists specific pages where Google's crawler found mobile problems — text too small to read, clickable elements too close together, content wider than the screen. If you are not set up on Search Console yet, that is the first thing to address. Related: why isn't my website showing up on Google covers what Search Console shows and why it matters.
What can be fixed without rebuilding
Several mobile problems are fixable with targeted CSS changes: adding responsive image rules, increasing font sizes at narrow breakpoints, making buttons larger, and suppressing or repositioning pop-ups on small screens. These changes can be applied to an existing site without touching its content or visual design.
What usually requires more structural work is a layout with no responsive breakpoints at all — where the entire page was designed at fixed desktop widths with no rules for small screens. Adding responsive rules after the fact is possible, but it often surfaces cascade problems where one fix breaks another part of the layout. The most reliable path in that case is a rebuild with mobile-first CSS.
A Website Intelligence Audit covers mobile usability as part of the technical review — identifying the specific causes of mobile display problems and whether they are fixable with targeted changes or require structural work. Related: small business website checklist includes mobile speed and usability as two of the ten checks worth running today.
Find out what is actually breaking your mobile experience.
A Website Intelligence Audit covers mobile usability, page speed, and search visibility — delivered as a prioritized fix list. No hourly rate. Fixed price.