Why your website looks broken on your customer's phone (and how to fix it in 48 hours)

I was at a BNI meeting last month. A member — good business, ten-year track record, well-liked in the chapter — was talking about how his website was not generating any enquiries. He pulled it up on his laptop to show me. It looked fine.

I asked him to pull it up on his phone. He did. The navigation menu was covering the headline. Half the text was running off the right edge of the screen. The "Call Us" button was invisible behind a footer element that had shifted out of place.

He looked at it for a few seconds.

"I have never looked at my own website on a phone."

He runs a business. He has a phone in his pocket at all times. He had never opened his website on it.

I think this is more common than anyone admits.

The numbers that matter

Around 75% of SME website traffic in Malaysia arrives on mobile devices. This is not a future trend. It has been true for several years and it is accelerating.

Google has used mobile-first indexing since 2019. This means Google crawls and ranks your site based on how it appears on mobile — not desktop. If your mobile site is broken or slow, your Google rankings suffer. Full stop.

A study of Malaysian SME websites conducted in 2024 found that fewer than 30% of tested sites passed all basic mobile usability criteria. The most common failures: text too small, touch targets too close together, content wider than the screen, and load times above five seconds on a typical mobile data connection.

If your site is in the 70% that fails, you are turning away more than two thirds of your potential clients before they read a single word about your business.

The 10-minute audit you can do right now

Pick up your phone. Not your laptop. Your phone. Open your website's homepage. Go through this checklist:

Text readability. Can you read the main headline and body text without zooming in? If you have to pinch-zoom to read, the text is too small. The minimum readable body text size on mobile is 16 pixels.

Tap target size. Can you comfortably tap each button and link without tapping the wrong one? Buttons and links need a minimum tap area of 44 by 44 pixels. If your nav links are packed close together, they will fail this test.

Horizontal scroll. Does anything require you to scroll left or right? Nothing on a mobile-optimised website should extend beyond the screen width. If you see a horizontal scrollbar, something is broken.

Images. Do images load? Do they fit the screen without cutting off or creating whitespace? Are they readable at mobile size?

Forms. If you have a contact form, fill it in on your phone. Does the keyboard appear automatically? Do the fields behave correctly? Does it submit?

Speed. From the moment you tap the link to when you can read the page: how long does it take? More than four seconds is a problem. More than seven seconds and most visitors will leave before seeing anything.

CTAs above the fold. Without scrolling, can you see a way to contact the business? A phone number, a WhatsApp link, a button. If the first screen gives visitors no path to action, they often do not scroll to find one.

Count your failures. If you fail three or more, this is not a minor issue — it is the primary reason your website is not working.

The five most common problems and how to fix them

Problem: Text too small

Why it happens. The website was designed on a desktop with 14px or 15px body text. This reads fine on a large monitor. On a phone, it is unreadable.

How to fix it. The minimum is 16px for body text. 18px is better for long paragraphs. Most modern website platforms let you set a different font size for mobile breakpoints. In CSS, the fix is typically a media query targeting screens below 768px and increasing font-size to 1rem or 1.125rem at minimum.

Problem: Buttons and links too close together

Why it happens. Navigation menus and action buttons are placed based on how they look on a desktop. On a phone, the elements compress and overlap.

How to fix it. Every interactive element needs at least 8px of padding around it, and at least 8px of gap between it and the next interactive element. The reliable fix is a hamburger menu for mobile navigation rather than trying to fit all nav links in a horizontal row.

Problem: Images breaking the layout

Why it happens. Images have fixed widths set in pixels rather than responsive units. A 900px wide image on a 390px wide phone will force horizontal scroll.

How to fix it. Add max-width: 100% and height: auto to all images in your CSS. This is a one-line fix that solves most image overflow issues instantly. If you are on WordPress, most modern themes handle this automatically — check if your images have been manually sized with inline styles overriding the theme.

Problem: Slow load time

Why it happens. Uncompressed images are the most common culprit. A homepage hero image that is 4MB will take 10 to 15 seconds to load on a Malaysian 4G connection. The second most common cause: multiple unoptimised plugins or tracking scripts loading before any content.

How to fix it. Compress every image before uploading. Tools like Squoosh (free, browser-based) will reduce a 4MB JPEG to under 200KB with no visible quality loss. Serve images in WebP format where possible — it is 30% smaller than JPEG at the same quality. On WordPress, the Smush or ShortPixel plugin handles this automatically.

Problem: Contact mechanism buried or broken

Why it happens. The original designer assumed visitors would scroll to the footer to find contact details. On mobile, many visitors do not scroll that far if they cannot see a reason to.

How to fix it. Put your phone number or WhatsApp link in the header. Not the footer. The header. If you run a service business, add a floating WhatsApp button that stays visible as the user scrolls. The code for a floating WhatsApp button is freely available and takes 20 minutes to add to any website.

The 48-hour fix plan

Hours 1 to 2. Run the audit above. Document every failure. Take screenshots on your phone.

Hours 3 to 8. Fix the quick wins first: text size, image compression, mobile nav. These are configuration changes on most platforms — no developer needed.

Hours 9 to 24. Address the structural issues. If your layout requires developer work, brief exactly what is broken using the screenshots from your audit. Most mobile layout fixes take a developer two to four hours if you brief them precisely.

Hours 25 to 48. Re-test on multiple phones if possible — an Android mid-range device and an iPhone both. Test on wifi and on 4G. Ask someone who has not seen the site before to find the phone number and fill in the contact form. Watch them do it.

What this tells you about your whole digital presence

The condition of your mobile experience is a leading indicator of the condition of your overall digital presence. If nobody has tested the mobile experience, probably nobody has checked the page speed, the structured data, the meta descriptions, or the contact flow either.

A broken mobile website is not a website problem. It is a maintenance and attention problem. The fix is one part technical and three parts habit — checking your own site the same way your customers see it.

The fastest path to a website that works correctly on every device is to build it mobile-first from the start, not to retrofit desktop designs for smaller screens. That is the architecture decision that determines how much ongoing fixing you have to do.

Wiz sites are built mobile-first, tested on mobile before launch, and run clean on every screen. See one built for your business.