Back to Blogs
When a client sends me a message saying their website "looks broken on the phone", I already have a good idea of what I'll find. The page slides sideways when they scroll. The menu covers half the screen. The contact form has tiny fields that zoom the whole page in when you tap them. The site looked fine on the laptop where it was built, and nobody checked it on a real phone before it went live.
On the small business sites I work on, a big share of visitors arrive on a phone. So a site that only works on a laptop is letting down a lot of the people who actually find it. In this post I'll go through the mobile problems I fix most often and how I fix them, without rebuilding the whole site.
Why I build mobile first now
Years ago I built the desktop layout first and then squeezed it down for smaller screens. That always ended with a pile of overrides: hide this, shrink that, stack these. It worked, but the mobile CSS was a patch on top of a design that was never meant for a small screen.
Now I write the base styles for a phone and add media queries as the screen gets wider. A phone layout is usually one column, so the base CSS is short and simple. The desktop version adds columns and spacing on top. When something breaks, I know where to look, because each width only adds things instead of undoing them.
/* base: phone */
.services { display: grid; gap: 16px; }
/* wider screens add columns */
@media (min-width: 768px) {
.services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
.services { grid-template-columns: repeat(3, 1fr); }
}Even on an older site that was built desktop first, I don't rewrite everything. I fix the specific problems below, and they cover most of what owners complain about.
Fixing horizontal scroll
Sideways scrolling is the most common problem I see and the one that makes a site feel the most broken. You try to scroll down and the whole page wobbles left and right. It almost always comes from one element that is wider than the screen.
Find the element that is too wide
Guessing wastes time, so I find the exact element first. In Chrome DevTools I switch to a phone size and paste a small snippet into the console that lists every element wider than the window:
document.querySelectorAll('*').forEach(el => {
if (el.getBoundingClientRect().right > window.innerWidth) {
console.log(el);
}
});Usually it points to one of a few usual suspects:
- A section or image with a fixed width, like
width: 1200px, instead ofmax-width. - Something using
100vw, which on many browsers includes the scrollbar and ends up a little wider than the page. - Animations that slide elements in from the side. The element sits off screen before it animates, and the page grows to fit it.
- Long words, email addresses or URLs that can't wrap.
- Embedded maps, videos or tables with a fixed width.
- A row with negative margins that are wider than the padding around it.
Fix the cause, not the symptom
The quick fix people find online is overflow-x: hidden on the body. I avoid using it as the only fix, because it hides the problem instead of solving it, and on some phones it can break sticky headers. I fix the element itself: swap fixed widths for max-width: 100%, replace 100vw with 100%, let long text wrap with overflow-wrap: anywhere, and put wide tables inside a wrapper that can scroll on its own. If a slide-in animation is the cause, I clip it on its own section with overflow: clip so the rest of the page stays still.
I also make sure every image has max-width: 100% and height: auto in the base CSS. That one rule prevents a lot of trouble on its own.
Making forms usable on a phone
The contact form is usually the most important thing on a small business site, and it's often the worst part on mobile. If people can't fill it in comfortably, they leave, and the owner never knows they were there.
Full-width fields and real tap targets
On a phone I make every field and button full width, stacked in one column. Two fields side by side on a 375px screen are each too narrow to read what you typed. Buttons and fields get a height of at least 44 to 48 pixels so they are easy to tap with a thumb, with enough space between them that you don't hit the wrong one.
Stop the page from zooming in
On iPhones, if an input's font size is smaller than 16px, Safari zooms the page in when you tap it, and the visitor has to pinch back out. Setting form fields to font-size: 16px fixes it. I never fix this by disabling zoom in the viewport tag, because some people need to zoom to read.
Use the right keyboard
Small details make forms faster to fill in. I use type="email" and type="tel" so the phone shows the right keyboard, and add autocomplete attributes like name, email and tel so the browser can fill them in. Labels stay visible above the fields instead of relying on placeholder text that disappears as soon as you start typing.
After a successful submit, I hide the form and show a clear message in its place. On a small screen, a little success line below a long form is easy to miss, and people end up sending the same message three times.
Menus, headers and fixed buttons
A header that takes up a quarter of the screen leaves very little room for the actual content. On phones I keep the header to a single short line with the logo and a menu button. If the header is sticky, I keep it slim so it doesn't eat the screen while scrolling.
The menu itself should open full screen or as a clean panel, close when you tap a link, and not leave the page scrolling behind it. I also check that it can be closed easily, because a menu with a tiny close button in the corner is frustrating.
Floating WhatsApp or call buttons are useful on mobile, but I check that they don't cover the form's submit button or the cookie notice. If there is more than one floating button, I usually keep only one on mobile.
How I test mobile layouts
DevTools device mode is good for finding problems quickly, but I don't trust it as the final check. Before I say a mobile fix is done, I do this:
- Open the site on a real phone, both an iPhone and an Android if I can, and scroll every page from top to bottom.
- Check the narrowest common width, around 360px, plus a tablet in both orientations.
- Fill in and send every form from the phone and confirm the email arrives.
- Tap every button and menu link with my thumb, not a mouse pointer.
- Rotate the phone to landscape and check that nothing overlaps.
- Look for text that is too small to read without zooming.
This takes maybe twenty minutes for a small site, and it catches the problems a visitor would hit in the first ten seconds.
Small fixes, big difference
Most mobile problems don't need a redesign. They come from a handful of fixed widths, a form that was never tried on a phone, and a header that grew over time. Fixing those usually takes a few hours, and the site immediately feels more solid to the people who actually use it.
If your site slides sideways or your form is hard to use on a phone, start by finding the one element that is too wide and by filling in your own form on your own phone. You will probably spot most of the problems yourself. If you'd like me to take a look, you can send me a message through the contact page.
