Website Looks Wrong on Mobile? Common Causes and What to Check
The site looks good on your laptop, and then you open it on a phone: text is tiny, buttons are hard to hit, the menu is awkward, or the page scrolls sideways. For many businesses, most visitors arrive on a phone, so a layout that only works on a desktop screen quietly costs enquiries and bookings.
This guide explains how to see what your visitors see, the usual reasons a website looks wrong on mobile, and what is a quick fix and what needs proper development work.
Why a website that looks wrong on mobile costs more than looks
Mobile problems affect more than looks. Google’s guidance on mobile-first indexing states that it uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking. It also says your mobile site should contain the same content as your desktop site. If your mobile version hides or trims content, such as text, images or links that exist on desktop, that reduced version is what search engines see. Google describes responsive design, where one page adapts to the screen, as the easiest setup to get right.
See the problem the way visitors see it
- Use a real phone, ideally two: one recent and one older, if you can. Open your home page, a service page, the contact page and any booking or enquiry flow.
- Try the whole journey, not just the first screen. Open the menu, scroll to the bottom, fill in the form and press send.
- Turn the phone sideways. Some layouts only break in landscape.
- Use your browser’s responsive or device mode to preview other screen sizes on a computer. This is an approximation and does not replace testing on a real device, but it is useful for comparing sizes quickly.
Write down each thing that is difficult, with the page address and what you were trying to do. A list like this makes a developer’s job much faster and gives you something to check afterwards.
The usual causes
| What you see on the phone | Typical cause |
|---|---|
| The page is a tiny version of the desktop layout | The page is missing a correct viewport setting, or the layout has fixed widths |
| The page scrolls sideways | An image, table, video or element wider than the screen |
| Buttons and links are hard to tap | Targets too small or too close together |
| Text is too small to read without zooming | Font sizes set for desktop, or text embedded inside images |
| The menu does not open, or covers the page | A script conflict or a menu not designed for small screens |
| A popup cannot be closed | The close button sits off screen on small devices |
| Images look blurry, or the page loads slowly on mobile data | Images at the wrong size for the screen |
| A form is awkward to fill in | Fields too small, labels hidden, wrong keyboard type |
Tap targets and spacing
Google’s guidance on tap targets recommends a minimum touch target size of around 48 by 48 device-independent pixels, roughly the size of a fingertip, with about 8 pixels of space between targets so that a press on one does not hit another. A row of small text links crowded together, common in footers and menus, fails that test and makes a site feel clumsy even when it technically works.
Content hidden on mobile
Some themes and page builders let you hide sections on small screens. Used carefully, that can keep pages tidy. Used heavily, it creates a mobile page that says less than the desktop one, which can weaken both the experience and what search engines can read. If something is important enough to appear on desktop, it usually deserves a place on mobile, in a form that suits the screen.
Checks a site owner can reasonably do
- Look at the images and tables on the page where the sideways scroll happens, and see whether one is wider than the others.
- Check your theme or page builder’s mobile settings, if it has them, for sections hidden on small screens or font sizes fixed for desktop.
- Disable a plugin temporarily, on a staging copy if possible, to see whether a popup, slider or menu plugin is the cause.
- Re-test after each change, on a real phone.
Be careful editing a live site. Take a backup first, and try layout changes on a staging copy where you can. Small style tweaks pasted in from forums can fix one page and break another.
When it needs development work
Some problems sit in how the site was built, and patching them is slow and fragile:
- A theme or builder that was never designed to adapt to small screens.
- Layouts held together by many overrides, so that fixing one screen size breaks another.
- Menus, sliders or booking widgets that rely on scripts which clash on mobile.
- Forms and booking flows that need redesigning for touch input.
In those cases the choice is between reworking the affected templates and styles, or rebuilding more of the site. How far to go depends on what else is wrong with the site, which is covered in the guide to repairing or rebuilding a WordPress website.
Getting help when your website looks wrong on mobile
I check how pages look and behave on phones, tablets and desktops, then adjust spacing, menus, images and forms so the site stays easy to use at each size. That applies to new builds and to existing sites that feel awkward on smaller screens. If you send me your list of problem pages and what you were trying to do on each, I can tell you whether it looks like a quick adjustment or something deeper, and suggest where to start.