Start with what breaks on the phone
A website that looks bad on mobile may have a layout problem, but it may also have content, interaction, or loading problems. Finding out which one is blocking a customer is more useful than assuming the whole site needs replacing.
- Responsive layout: columns stay too wide, sections overlap, or the page needs sideways scrolling.
- Content and media: a heading clips, text becomes hard to read, or an image crops out what matters.
- Interaction: the menu needs hover, controls are difficult to tap, or a form stops working comfortably.
- Loading: images arrive late, content jumps, or a control appears before it responds.
A desktop page reduced to phone width often keeps the wrong relationships. Responsive design changes composition as space changes: columns can stack, headings can wrap, and media can fit their container. Google's responsive design guidance explains flexible sizing and choosing layout changes around the content, rather than a short list of device models.
Match the symptom to a useful check
These are possible causes, not diagnoses. Record the page address, phone and browser, and the steps that expose the issue. A screenshot or short screen recording gives whoever maintains the site something they can reproduce.
| Symptom | Possible cause | What to check / next action |
|---|---|---|
| The whole page scrolls sideways | A fixed-width section, image, embed, table, or unbroken text is wider than the screen. | Find where content extends past the edge. Ask for that element to fit, wrap, or scroll inside its own labeled region. |
| Headlines or content are clipped | A fixed height, oversized type, or hidden overflow leaves too little space for wrapping. | Check longer headings and larger text settings. The container should grow with the content instead of cutting it off. |
| An image loses its important subject | A wide image is cropped into a narrow frame without a suitable focal point. | Compare the original image with the mobile crop. Adjust the crop, frame, or source image so its meaning survives. |
| Navigation needs hover or precise taps | A desktop dropdown has no touch behavior, or controls are too close together. | Open every menu level with taps. Check that destinations are reachable and the menu closes predictably. |
| Sticky elements cover content or actions | Headers, chat widgets, notices, or bottom bars compete for limited screen space. | Check the top and bottom of the page while scrolling. Note the overlap so the sticky behavior or spacing can be adjusted. |
| A form is difficult with the keyboard open | Fixed-height panels, sticky controls, or unsuitable input settings obstruct the form. | Focus each field on a real phone. Confirm you can see the label, read errors, scroll onward, and reach the next action. |
| Content shifts during loading | Images or embeds have no reserved space, a font changes the text size, or new content is inserted above it. | Reload and watch what appears just before the jump. Ask the maintainer to reserve space and investigate that resource. |
Keep the content and next step in view
Oversized headings, tiny body copy, long unbroken strings, and narrow line spacing make reading harder. Images can fit the screen and still lose their subject. Check the meaning of the content as well as its dimensions: can someone see the product, read the service description, and find what to do next?
Wide data may still need horizontal scrolling. A comparison table can have its own labeled, keyboard-accessible scroll area, like the table above, while the rest of the page stays within the screen. Hiding overflow across the entire page can conceal the symptom without making the missing content usable.
Check forms with the keyboard open
A form screenshot cannot show whether someone can finish it. Focus each field on a real phone. Check that its label remains visible, the keyboard suits the input, and you can scroll to the next field and submit button. Useful autocomplete can reduce unnecessary typing.
Errors should explain what needs correcting near the relevant field. Test required fields, invalid input, and the success message in a test environment when available. A controlled live submission is appropriate only when you can identify and remove the test and coordinate any notifications or follow-up. Do not place real orders or generate payments to check a layout; use the provider's test mode for those flows.
Separate slow loading from broken layout
If the page becomes usable once everything has loaded, investigate loading behavior alongside the layout. Large media and third-party widgets can delay content or interaction. A page that jumps may need space reserved for images, embeds, or fonts. Google's guide to reducing unexpected layout shifts explains these common causes.
Reload an important page and observe when the problem appears. Compare Wi-Fi with mobile data when available, and note the conditions rather than assuming every visitor sees the same delay. The guide to why a website is slow covers the performance investigation in more detail.
Run a short customer-path check
- Choose the important pages. Include the homepage, a main service or product page, and the contact or booking page. Add a page with a long heading, gallery, or table if those appear elsewhere on the site.
- Read on a real phone. Try portrait and landscape, then a different phone size if one is available. Check larger text settings and watch for clipping, awkward crops, and sideways scrolling.
- Follow the customer path. Use the menu to find a service, read its details, and reach the inquiry or booking step. Stop before confirming an appointment, order, or payment.
- Check the form safely. Open the keyboard, move through fields, and check whether labels and actions stay reachable. Use a test environment for submission checks, or a clearly marked live test only under the controlled conditions above.
- Record and prioritize. Save the URL, device, browser, and steps for each issue. Put blocked customer actions ahead of minor visual inconsistencies, then repeat the same path after a fix.
This is a useful first pass, not a complete usability or accessibility assessment. A clean screenshot or automated score cannot confirm that the whole customer path works.
Choose a repair that matches the problem
- Repair an isolated component when the issue is contained: one image crop, overflowing table, menu control, or form field. Verify the repair on other pages using that component.
- Improve recurring responsive patterns when the same heading, spacing, media, or sticky-element problem appears across templates. A shared fix can be more coherent than adjusting each page separately.
- Consider a broader redesign when navigation, page hierarchy, content, and customer actions fail throughout the site, or routine changes keep introducing new problems. Establish what can be preserved before replacing the foundation.