Mobile layout problems came up in 42 of our 110 WordPress projects (38%) and in 15 of 45 landing pages. Only brand and design details came up more often. That makes sense: clients usually review a draft on a laptop in the office, and then show it to someone on their phone in the evening.
Here are the mobile issues we see again and again, and how we deal with them.
The mobile issues we see most
The menu does not open
The classic. On desktop the navigation works; on a phone, tapping the burger icon does nothing, or the menu opens behind another element. We have found this on WordPress sites and on a Shopify store alike. Causes range from a script conflict to a header section with the wrong stacking order.
Overlapping elements
Images sliding over text, a sticky header covering the first headline, two columns squeezed into one line. In our internal notes this often appears as a "z-index" issue: elements that sit on top of each other in the wrong order on small screens.
Font sizes that do not scale
A headline that looks elegant at 60 pixels on desktop fills half the screen on a phone. Long German compound words make this worse because they cannot wrap. We set separate font sizes for mobile and tablet rather than relying on automatic scaling.
Buttons and icons out of line
Clients notice when social icons and a button are not aligned, or when a call-to-action button is pushed below the fold on mobile. Feedback like "the button should be inline with the icons" is typical and easy to fix once spotted.
Images cropped badly
A team photo cropped so heads are cut off, a banner where the product disappears on narrow screens. We set focal points and sometimes use different images for mobile.
Tables and wide content
Price tables, opening hours and comparison tables often break on mobile. We convert them to stacked cards or make them scroll horizontally.
Forms that are hard to use
Small input fields, dropdowns that are hard to tap, the wrong keyboard for phone numbers. On mobile, every unnecessary form field costs enquiries.
How we catch mobile issues before the client does
| Check | How |
|---|---|
| Real devices | Every page on at least one iPhone and one Android phone, not only browser simulation |
| Breakpoints | Desktop, tablet and phone settings reviewed separately in Elementor |
| Navigation | Menu, sub-menus and language switcher tested by tapping, not clicking |
| Forms | Complete a submission on a phone, including the confirmation |
| Speed | Check loading on mobile data, not only office Wi-Fi |
Our quality check lists include items like "check the mobile view of every section" and "CTA buttons visible without scrolling". Still, some issues only appear on a specific device or with the client's real content, which is why we ask for mobile feedback in the first round.
Why mobile feedback should come first
In several of our longer projects, detailed mobile feedback arrived in the third or fourth revision round. At that point, fixing it sometimes means restructuring sections that had already been approved on desktop. When mobile feedback comes in the first round, the fix is usually a setting.
Our advice to clients: open the staging link on your phone first. Scroll through every page as a customer would. Only then review on desktop.
Design for mobile, not only adapt to it
Beyond fixing issues, a few principles make mobile layouts better from the start:
- Shorter hero sections. The first screen on a phone should show who you are and what to do next.
- Tap-to-call and tap-to-message. For local businesses, the phone number should be one tap away.
- Fewer columns. Three columns on desktop become one on mobile; order them by importance.
- Sticky call to action for booking or enquiry-driven sites, used sparingly.
- Lighter media. Autoplay background videos are often replaced by an image on mobile to save data and loading time.
What we tell clients about mobile testing
You do not need special tools. Use your own phone, and if possible one other model from a colleague. Take screenshots of anything that looks wrong and add them to your feedback document with the page name. That is all we need to find and fix the issue.
FAQ
Why does my site look different on my phone than on my colleague's?
Screen sizes, operating systems and browsers vary. We test on common devices, but specific models can show small differences. Send us a screenshot with the device name and we will adjust.
Is a responsive website the same as a mobile-friendly one?
Responsive means the layout adapts to the screen. Mobile-friendly also means it is easy to use on a phone: readable text, large tap targets, fast loading and short forms.
Should I have a separate mobile website?
No. A single responsive site with mobile-specific settings is easier to maintain and better for search engines.
What feedback comes up most on a first website draft?
Brand details. Fonts, colours and design details came up in 52% of our WordPress projects, and mobile layout in 38%. Sending exact brand values and checking the draft on a phone early saves a round.
How many revision rounds are normal for a website?
The median in our WordPress projects was 2 rounds. Builds with two rounds were delivered in a median of 22 days; with four or more rounds it was 58.5 days.
Where the numbers come from: our own project records in Odoo – 233 finished projects, 909 tasks and about 4941 logged hours, mostly from 2025–2026. Durations are calendar days from kickoff and we quote medians, so one unusually long project does not distort the picture.
Planning a website project?
If you want a realistic plan for your own project, book a short call with our team and we will walk you through the phases, what we need from you and where projects like yours usually lose time. You can also browse finished work in our website portfolio.
Comments