Guide

Website looks bad on phones? How to find and fix the problems

Why websites look different or broken on phones, how to check yours on a real phone and in Chrome, and where to fix it in WordPress, Wix, Squarespace and Shopify.

By Grid Design · 24 October 2026 · 7 minute read

A website usually looks bad on phones for one of a few reasons. It isn't set up to resize for small screens. Something on the page is wider than the screen. Images and text were arranged for a desktop layout and haven't been adjusted. Or your website builder has a separate mobile layout that nobody has checked. The fix depends on which one it is, so the first job is to look properly and name the problem.

Check on a real phone first, then use Chrome's device mode to try other sizes. Then work through the common causes below, and the section for your website builder.

Why does my website look different on mobile?

Phones are narrow, so a well-built site rearranges itself. Columns stack on top of each other, the menu folds into a button, images shrink. That's meant to happen. It looks bad when the rearranging goes wrong: text spills off the edge, photos are cropped in odd places, buttons end up tiny, or things overlap.

How to check your site on a phone

On a real phone

Open your site on your own phone, and if you can, on a friend's phone of a different make.
Look at the first screen without scrolling. Can you see what you do, and a button?
Scroll slowly down the whole page. Look for text running off the edge, overlapping or too small to read.
Try to scroll sideways. If the page moves sideways, something on it is too wide.
Tap every button and link, open the menu, and tap the phone number.
Turn the phone on its side and look again.

In Chrome's device mode

On a computer, open your site in Chrome, right-click and choose Inspect, then click the phone and tablet icon at the top of the panel that opens. The shortcut is Ctrl+Shift+M, or Cmd+Shift+M on a Mac. Pick a phone from the list at the top, or drag the edges to change the width. It's quick for trying lots of sizes, but it's an imitation. Fonts, scrolling and the browser's own bars can behave differently on a real phone, so use both.

Our free mobile-friendly test does a version of this for you. It loads your page at a typical phone width and checks whether it's set up for phones, whether it scrolls sideways, whether buttons are big enough to tap, whether text is readable, and whether there's a button on the first screen, with screenshots.

The common causes

The page isn't set up for phones

A missing viewport tag, a line in the page's code, makes phones show a shrunken desktop page you have to pinch to read. It's rare on modern website builders but common on older, hand-built sites.

Something is wider than the screen

One wide image, table, embedded map, video or fixed-width box makes the whole page scroll sideways. To find it, use Chrome's device mode, scroll sideways and see what sticks out past the edge.

Text inside or on top of images

A banner with text on a photo can look fine on a wide screen. On a phone, the photo is cropped, and the text lands on a busy part or gets cut off. Worse, if the words are part of the image file, they shrink until they're unreadable. Put the words in real text, below the image on mobile or on a solid background.

Text and buttons that are too small

Body text smaller than about 16 pixels is hard to read on a phone. Buttons and links that are small or crowded together get mis-tapped. WCAG 2.2, the main accessibility standard, sets a minimum target size of 24 by 24 pixels. Bigger is easier.

A first screen that's all picture

A tall header photo that looks grand on a laptop can fill the whole phone screen, pushing your headline and button out of sight. Make it shorter on mobile, or put the headline first.

Pop-ups, banners and bubbles

A cookie banner, a chat bubble, a sticky offer bar and a newsletter pop-up can each be fine alone. Together, on a small screen, they can cover most of the page.

Mobile rules in our checklist

Easy to useYour page shows up tiny on phonesPhones show a shrunken version of your desktop page, so people have to pinch and zoom. Many will leave instead.Easy to useYour page slides sideways on phonesWhen the page is wider than the screen it feels broken, and people may lose trust or leave.Look and feelYour text is too small on phonesTiny text is tiring to read on a phone, so people skim or leave.Easy to useButtons are too small to tap on phonesSmall or crowded buttons cause mis-taps, which frustrates everyone and shuts out people with shaky hands.Easy to useOn phones, your headline is pushed out of sightA phone screen is small. If a big image or awkward layout fills it, people don't see what you do.Easy to useParts of your page look broken on phonesOverlapping or cut-off content makes your business look careless, and people may struggle to use the page.AccessibilityWords on your photos are hard to readParts of the text get lost against the photo, so people with poor eyesight may not be able to read your message.Easy to useOn phones, bars and chat bubbles cover your pageEvery bar that stays on screen leaves less room for your content, and can hide buttons people need to tap.

Fixing it in WordPress

Most current WordPress themes resize for phones. If yours doesn't, the theme is probably old, and updating or replacing it may be the real fix. If you use a page builder such as Elementor or Divi, it has a mobile view where you can set different text sizes, spacing and layouts for phones. Look for settings marked with a phone icon. The block editor has a mobile preview too. Plugins that add sliders, pop-ups or tables are common causes of sideways scrolling, so check those if something sticks out.

Fixing it in Wix

The Wix Editor has a separate mobile view. Switch to it with the phone icon at the top of the editor. Layout changes you make there mostly apply to mobile only, while text changes apply to both versions. Common problems are elements added on desktop that land in odd places on mobile, text boxes overlapping, and elements hidden on mobile leaving gaps. Wix Studio works differently: you adjust the layout at each screen size, called a breakpoint.

Fixing it in Squarespace

Squarespace sites rearrange for phones automatically. In Squarespace 7.1 with the Fluid Engine editor, you can switch the editor to mobile view and move and resize blocks for phones separately. Older layouts stack automatically with fewer controls. Common problems are images cropped through someone's head, so set the image's focal point, very large headings that break awkwardly, and spacing that leaves big gaps on a narrow screen.

Fixing it in Shopify

Current Shopify themes resize for phones. In the theme editor, switch the preview to mobile with the icon at the top. Problems usually come from banner images with the words baked into the picture, sections with too much in them, apps that add pop-ups, badges or bars, and custom code added by a previous developer. Many theme sections have their own mobile settings, such as image height or whether columns stack, so check the section's settings before reaching for code.

When patching stops making sense

If your theme or template is old and every fix breaks something else, moving to a modern theme can be cheaper than patching. Our guide to whether you need a new website or just a few fixes covers how to decide.

For a quick read on where the problems are, try our free mobile-friendly test, or the check below. Both load your page at phone size and desktop size and show what's wrong, with screenshots, so you know exactly what to fix or what to ask your web person for.

Check your own site

Get a score for your website and your top problems, with screenshots, in about 2 minutes. Free, no card needed.