Responsive design
Why your website looks broken on phones, and how to fix it
You open your own website on your phone and something is off. The text runs past the edge of the screen, the buttons are too small to tap, or the menu does nothing. It's one of the most common problems I'm asked to fix, and it almost always comes down to a handful of causes.
What "broken on mobile" usually looks like
- You have to scroll sideways to read a line or see an image.
- The text is tiny, so people pinch and zoom.
- Buttons and links sit so close together that you tap the wrong one.
- The menu doesn't open, or it covers the page and can't be closed.
- Images or videos spill out of their boxes.
- A layout that looks fine on a laptop stacks in a strange order on a phone.
Check it properly before you change anything
Don't judge by one phone. Open the site on a real phone if you can. Then, in Chrome on a computer, press F12, click the device icon and switch between a few screen sizes. Run Lighthouse from the same developer tools for a quick list of problems such as text that is too small or buttons that are too close together.
Write down which pages and which screen widths look wrong. That list is the most useful thing you can give a developer.
The usual causes
- A missing viewport tag. Without it, phones pretend the screen is desktop-sized and shrink everything. It is one line in the page head, and it's the first thing I check.
- Fixed widths. A box that is set to 1200 pixels wide can't fit on a 390 pixel screen. Layouts should flex to the space they have.
- Images with no size limit. One large image can force the whole page wider than the screen.
- Tables and embeds. Wide tables, maps and videos need their own rules so they shrink or scroll inside a box.
- Menus that only work on hover. A touch screen has no hover, so dropdowns that open on hover never open.
- Text and buttons sized for a mouse. Body text under about 16 pixels is hard to read on a phone, and tap targets should be around 44 pixels so a thumb can hit them.
- Old themes and page builders. Some layouts were never designed for small screens, and plugins add their own styles on top.
How it gets fixed
The fix is rarely a rebuild. I usually work through the page templates one at a time. I swap fixed widths for flexible ones, make images scale inside their container, rebuild the menu for touch, raise text and button sizes, and then test again at several widths, from small phones up to tablets.
On a new site I start mobile-first: design for the small screen, then add room for larger ones. That avoids most of these problems before they appear.
When it's worth rebuilding instead
If the site sits on an old theme that fights every change, or every page has its own hand-made layout, patching can cost more than starting clean. A good developer will tell you which case you're in after a short look, and show you what they found.
Why it matters
Most visitors will see your site on a phone first. If it's awkward there, they leave. Google also mostly looks at the mobile version of a page when it decides how to rank it, so a broken phone layout hurts you twice.