Why does my website look broken on mobile?

Your website looks good on your laptop. Open it on a phone and the headline runs off the screen, the cards feel cramped or the menu covers the contact button.

You don't need to begin with a full redesign. First, find the section that fails and describe what should happen instead.

Why does my website look broken on mobile?

The desktop layout may be asking for more space than a phone has.

Your website can look broken on mobile because fixed widths, crowded columns or overlapping elements don't adapt to a smaller screen. Menus and forms can also fail if they were only tested with a mouse.

A responsive website changes its layout to fit the available space. It doesn't simply shrink everything. MDN's responsive design guide explains that approach.

Let the visible problem choose your first check.

What you see	What to investigate
The whole page scrolls sideways	An element wider than the screen
Three cards stay squeezed together	Columns that should stack
Text or a button disappears	A box that clips or covers it
Everything looks tiny	The mobile page-width setting
A menu only opens with a mouse	Controls that need a tap action

Screenshot the problem and save the page address before changing anything.

How do you check the problem properly?

Start on a real phone, using your public website.

Open the page in a fresh tab, scroll to the bottom, open the menu and try the main action. If the site collects enquiries, fill in the form with the keyboard open.

Record what breaks: the heading, a price, the menu or a submit button. “The services page scrolls sideways when the pricing cards appear” is more useful than “mobile is bad”.

You can also use Chrome's device toolbar. Right-click the page on your laptop, select Inspect, then choose the device preview. Try several narrow widths, not only one phone preset.

The preview helps you locate a layout problem, but a real phone still matters: touch, browser bars and the keyboard change the experience.

If the page fits but takes too long to open, that's a separate issue. Follow the mobile website speed tutorial.

What usually fixes a broken mobile layout?

Repair the section that causes the problem.

1) Stop oversized content pushing the page sideways

Look for wide cards, tables, images and long text. A layout rule may force them to stay wider than the phone.

Ask your developer or AI builder to find that element and allow it to fit or wrap. For a useful comparison table, scrolling inside the table may be reasonable; the entire page shouldn't need sideways scrolling to read normal text.

Don't hide the problem by cutting off everything beyond the screen; that hides prices and buttons too.

2) Stack columns when they get cramped

A desktop row of three cards may need to become one column on a phone, as may an image beside a long heading.

That switch point is called a breakpoint. Choose it by looking at the content, not by assuming every layout breaks at the same width.

Check a slightly wider screen too, because a fix at one exact width can still fail on another phone.

3) Let text and images change shape

Headings need room to wrap; a fixed-height box can cut off text once the layout changes.

Keep the text readable instead of making every font smaller. Test long service names and larger phone text.

For images, decide what matters: filling the box or showing the whole picture. A product image or diagram may need its full content visible. MDN's image-fitting examples show how these choices affect cropping.

4) Check the mobile page-width setting

If the whole website looks like a tiny desktop page, ask whether the page has the correct viewport setting. This tells the browser to use the device's width.

Your framework may already add it, so check before inserting another copy. MDN explains the viewport setting.

Keep zoom available: turning it off fixes nothing and makes the page harder for some people to read.

5) Make menus and forms work with touch

Tap every menu control: open it, follow a link, come back and close it again. Nothing important should depend on hovering with a mouse.

Cookie notices, chat buttons and sticky headers can cover content or form controls on a small screen, so check those too. Our checks for website buttons show how to spot a button that something is sitting on.

In a form, open the keyboard and try each field. Can you still read the errors and reach the submit button? A page can look fine in a screenshot and still fail right here.

What should you ask an AI builder or developer?

Give them one specific failure to reproduce.

Use a short brief such as:

On the services page, the pricing cards make the whole page scroll sideways on my phone. Find the element causing it. Keep all prices and buttons visible, check nearby screen widths and confirm that desktop still works.

Attach the page link and screenshot, and ask what changed and how they tested it. Then check the fix reached your live domain.

If several mobile sections need attention, we can repair them in the order that matters. We take on repairs for custom-coded sites, priced by how much needs fixing. On a builder like Framer or Webflow, a rebuild is the conversation to have. Start with a free intro call, no commitment, or write to hi@aruno.studio, message us on WhatsApp or find us on Telegram at @mihaipostelnicu.

For a wider review of layout, copy and performance, our website audit provides a list of findings. Repairs are scoped separately.

How do you know the repair is finished?

Check what a visitor needs to do, not only how the page looks.

Use this final check on a real phone:

• Read headings, prices and text without sideways page scrolling.
• Open and close navigation, then follow a link.
• Check that images show the intended subject.
• Fill in the form and read its error messages.
• Confirm that floating controls don't cover the main action.
• Try larger text, another screen width and landscape orientation.
• Recheck desktop after the mobile change.

These shortcuts can leave the problem unresolved.

Shortcut	What it risks
Make all text smaller	A page that's difficult to read
Hide the broken section	Missing information or actions
Cut off sideways content	Buttons that remain off-screen
Accept one screenshot	Untested menus and forms

For an enquiry page, submit a labelled test and confirm the message arrives. A repaired layout doesn't prove the email connection works.

Frequently asked questions

Can I fix my mobile layout without rebuilding the website? Often, yes. Several broken sections can share one faulty layout rule. Find the cause before agreeing to a rebuild.

How much does a mobile layout repair cost? It depends on the affected pages and components. Ask for a quote that includes both the change and phone testing.

How long does it take? One sizing problem may be quick to fix. Navigation, forms and shared page layouts need more checking before they're ready.

Does a good PageSpeed score prove my mobile layout works? No. You still need to check readable content, tapping and completing the main task.

Your phone should offer the same useful information as your laptop. Check the whole visit.