How to fix a website that breaks on phones
Find out why your site breaks on phones, decide whether to patch it or rebuild it, and test the fix the way your visitors actually browse.
It looks correct on your screen
On your laptop the site is fine. On a customer's phone the text runs off the edge, a table forces sideways scrolling, the menu will not close and the enquiry button sits under a sticky banner. You only found out because somebody mentioned it in passing.
For most Indian businesses the majority of visitors arrive on a phone, often on a mobile network and frequently on a device several years old. The mobile view is therefore not a secondary layout. It is the website.
What a patch can and cannot do
A patch excludes the cause. Adjusting styles so a heading stops overflowing does not make the underlying layout responsive and the next content change will break it again in a new place. Be clear which of the two jobs you are buying. Fixing symptoms is cheap and repeats. Making the layout genuinely flexible is a structural job and fees carry GST at 18%.
Neither job includes new content. If your images are desktop-sized photographs weighing several megabytes each, a layout fix will not stop the page crawling on a mobile connection. Image preparation, shorter copy and simpler navigation are separate pieces of work and often matter more than the layout.
When patching is throwing money away
Stop patching if the site was built with fixed pixel widths, absolute positioning or a page builder that produced a desktop-only layout. Some older themes predate responsive design entirely. In those cases every fix creates a new fault elsewhere because the structure has no concept of a flexible width. Three rounds of patching on such a site costs more than replacing it and leaves you with the same problem. A rebuild through a proper website design engagement is the honest answer. Establish which category your site falls into before spending anything.
Equally, do not rebuild a site with three specific broken elements. If the layout reflows correctly and the failures are an oversized table, an unclosable menu and a popup that will not dismiss, those are three defined tasks. A redesign to solve them is an expensive way to avoid a developer reading your stylesheet. Ask whoever quotes to name the cause of each fault. A supplier who cannot explain why it breaks is guessing about the fix.
How to find what is actually wrong
Test on real devices. Borrow two phones, one recent and one old, and work through the paths that earn money rather than the homepage. Narrowing a desktop browser window is useful for a first look and it hides touch problems, font rendering and anything caused by the device keyboard.
Then check the usual causes in order. Confirm the page declares a viewport so the browser does not shrink a desktop layout. Look for any element with a fixed width wider than a small screen because one of those forces the whole page to scroll sideways. Check images and embedded videos are allowed to shrink. Replace wide tables with a layout that stacks or scrolls inside its own container.
Finally go through the interaction faults, which cause most lost enquiries. Tap targets too small or too close together. A sticky header that covers the field a visitor is typing into. A popup with a close button off screen. Fields that bring up the wrong keyboard for a phone number. Text so small that the browser zooms in and breaks the layout a second time.
How to judge whether it is fixed
The metric that matters is the completion rate of your key action on mobile compared with desktop. Split every report by device. If mobile visitors complete enquiries at a fraction of the desktop rate the layout is still costing money whatever the pages look like. Watch it template by template because one broken page type hides inside a site-wide average.
The metric that flatters is a pass on an automated mobile-friendly check. Those tools confirm text is readable and the viewport is declared. They cannot tell that your submit button sits behind a chat bubble. A clean report plus a flat mobile conversion rate means the fault is still there.
The common mistake
The common mistake is hiding content on small screens instead of restructuring it. A developer under time pressure switches off sections that will not fit. The page looks tidy on a phone and the visitor cannot find the price list, the specification or the branch address they came for. The hidden content is often still downloaded so the page stays slow and now serves less.
The expensive version is hiding the enquiry route. Phone numbers inside images, forms removed from mobile templates and calls to action pushed below several screens all read as cleaner design and quietly remove the only thing the page was for. If something does not fit on a phone shorten it or move it rather than conceal it.
Test the way India browses
Build a test set matching your visitors rather than your team. Your analytics names the devices, browsers and screen sizes people actually use and that list usually includes older Android handsets nobody in the office owns. Test one on a throttled connection and check the page can be used one-handed. Repeat after every content change. Mobile layouts break most often when somebody pastes in a long product name or a wide table.
This guide explains how something works. It is not legal, tax or financial advice, and rules change. Confirm anything regulatory with a qualified professional before you act on it.