A site looks different on a phone because the screen is about four times narrower, and the layout has to rearrange itself to fit. When that rearranging is missing or broken, you see the desktop page shrunk to unreadable size, elements spilling off the side, overlapping text or a menu that does not open.
Some difference is intended: a responsive site shows one column instead of three and hides the menu behind a button. The problems are the differences nobody planned.
See what a phone actually sees
- Open the page in Chrome, press F12, and click the device icon (Toggle device toolbar). Choose a phone, or type a width: 360, 375, 390 and 414 pixels cover most phones.
- Reload after switching, so the site detects the phone layout.
- Scroll the whole page, open the menu, tap the buttons, fill a form.
- Then check on a real phone. Emulators do not reproduce everything: real fonts, the on-screen keyboard and browser bars change the space you have.
The usual causes
| What you see | Usual cause | Fix |
|---|---|---|
| The whole page is tiny, like a zoomed-out desktop | No viewport meta tag | Add <meta name="viewport" content="width=device-width, initial-scale=1"> (guide) |
| The page scrolls sideways | One element is wider than the screen: a table, image, fixed width or long word | Find the widest element and let it shrink (guide) |
| Text overlaps or is cut off | Fixed heights, absolute positioning, text longer than the design expected | Let boxes grow with their content; avoid fixed heights on text containers |
| Buttons and links are hard to tap | Targets smaller than about 24 by 24 CSS pixels, or packed too close together | Add padding and spacing |
| Inputs zoom the page when tapped on iPhone | Input text smaller than 16 px | Set form fields to at least 16 px |
| The menu does not open or opens off screen | A script error, or the menu is positioned for desktop | Test the menu at phone widths; check the browser console for errors |
| A banner or bar covers half the screen | Fixed headers, cookie banners, chat widgets and ad bars stacked together | Keep fixed elements few and small on phones |
| Images are stretched or blurry | Fixed width and height without object-fit, or a small image enlarged |
Use object-fit and a large enough image for sharp screens |
Of the 24 sites SignalCrawler audited in September and October 2026, 20 had tap targets that were too small, 7 had form fields small enough to make iPhones zoom, and 5 scrolled sideways on phones.
Builder-specific notes
WordPress: check the theme first; an old theme may not be responsive at all. Page builders (Elementor, Divi and others) have separate mobile settings per element; a desktop-only width or a hidden mobile section is a common cause. Clear any cache plugin and CDN cache after changes.
Wix and Squarespace: Wix has a separate mobile editor; elements moved or hidden there do not change the desktop. Squarespace layouts are responsive, but custom code blocks and fixed-width embeds are not.
Canva sites and other builders: they are designed visually at desktop size; preview the mobile version and adjust what the builder allows.
How to check that it is fixed
- The page has no horizontal scroll at 320 to 430 pixels.
- Text is readable without zooming, and form fields do not trigger zoom on iPhone.
- The menu, dialogs and forms work at phone width.
- It holds up with longer text, for example a long product name or a translated label.
What SignalCrawler checks here
The audit opens sampled pages of every template in a real browser at ten screen widths, from 320 pixels to desktop, and looks for horizontal scrolling, overlapping elements, text that is cut off, small tap targets and fonts, inputs that make iPhones zoom, fixed elements that cover the screen and menus or dialogs that open off screen. Each finding comes with a screenshot that marks the element and the widths where it breaks. Try the free mobile-friendly test.