Tech

HTML Website Looks Wrong on Mobile: How to Find the Layout Problem

Tiny text, sideways scrolling or overlapping buttons on phones? How to find the exact element breaking your HTML website’s mobile layout.

By Harika Behara 31 Oct 2026 · 5 min read 0 views Rate it 0 comments

Short answer: When an HTML website looks wrong on mobile, check three things: a correct viewport meta tag, any element wider than the screen, and whether your CSS media queries apply. Browser developer tools can help identify elements and rules that need investigation.

Step 1

Check the viewport

Step 2

Locate overflowing elements

Step 3

Test real mobile interactions

Last reviewed: 30 October 2026. Guidance follows web.dev’s “Responsive web design basics” and MDN documentation.

What do you see?

Typical symptoms include text that looks tiny and needs zooming, a page that scrolls sideways, buttons that overlap, images spilling off the edge, or a menu that covers the content and will not close. Sometimes the page looks fine on one phone and broken on another.

What normally happens behind the scenes?

A phone browser needs to know how wide to treat the page. Without instructions, mobile browsers assume a desktop-sized layout of about 980 pixels and shrink it to fit the screen, which makes text unreadable. The viewport meta tag tells the browser to use the device’s real width instead. Once that is set, CSS media queries can switch to mobile-friendly styles at chosen widths.

Also readWebsite Broken After a WordPress Update? A Safe Recovery Checklist

Symptom, cause and check

Symptom	Likely cause	Check
Whole page tiny, needs zooming	Missing or wrong viewport tag	View source, search for “viewport”
Page scrolls sideways	One element wider than the screen	Developer tools element inspection
Desktop layout on phones	Media queries missing or not matching	Styles panel at a 375 px width
Images overflow	Fixed width in HTML or CSS	Look for `width="1200"` or `width: 1200px`
Fine on one phone only	Breakpoint gap, or caching of old CSS	Test several widths and hard-refresh

Before you change anything

Download a copy of the current HTML and CSS files, or use your host’s backup. If the site is in Git, create a branch. Make changes to a copy first and preview them locally or on a test URL, because a CSS change that fixes one page can affect every page that shares the stylesheet.

Safe checks, in order

1. Confirm the viewport tag

Open the page source and look inside <head>. web.dev recommends this tag for responsive pages:

<meta name="viewport" content="width=device-width, initial-scale=1">

It must appear once, in the head, on every page. Avoid adding user-scalable=no or maximum-scale=1, because those stop people from zooming, which harms accessibility.

2. Use device mode in developer tools

In Chrome or Edge, press F12 and click the device icon. Choose a common phone width such as 360 or 390 pixels. Scroll the page and watch for horizontal scrolling. This is faster than testing on a real phone, although you should test on one at the end.

3. Find the element that is too wide

If the page scrolls sideways, something is wider than the screen. In the Console, paste this short snippet to list the culprits:

document.querySelectorAll('*').forEach(e=>{if(e.scrollWidth>document.documentElement.clientWidth)console.log(e)})

Common offenders are large images, tables, embedded videos and maps, long unbroken links, and containers with a fixed width in pixels.

4. Make media flexible

For images and videos, a widely used rule is:

img, video { max-width: 100%; height: auto; }
/* Give iframe embeds an intentional aspect ratio or responsive wrapper. */

For wide tables, wrap them in a container with overflow-x: auto so only the table scrolls, not the whole page. Replace fixed widths such as width: 1100px with max-width: 1100px; width: 100%.

5. Check your media queries

In the Styles panel, confirm that your mobile rules are actually applied at the phone width. A typo, a missing closing brace or another cascade rule can prevent the expected result. Order matters when origin, importance, cascade layer and specificity are otherwise equal.

6. Clear caches and retest

Phones and CDNs may hold the old stylesheet. Add a version number to the CSS link, for example style.css?v=2, or purge the CDN cache, then reload.

What does success look like?

At 360 to 430 pixels wide there is no sideways scrolling, text is readable without zooming, tap targets are comfortably sized, and forms and menus work. Run Lighthouse in Chrome developer tools, which flags a missing or incorrect viewport tag.

Fix or workaround?

Setting overflow-x: hidden on the body hides the symptom but can cut off content and buttons. Treat it as a temporary workaround. The fix is to correct the element that is too wide.

When should you stop and ask for help?

Ask for help if the layout uses old table-based design, if several pages share tangled CSS, if JavaScript builds the layout, or if a fix on one page keeps breaking another. In those cases a structured responsive update may be cheaper than repeated patches.

How to prevent it happening again

Write CSS for small screens first, then add wider breakpoints.
Avoid fixed pixel widths for containers and media.
Test new content, especially tables and embeds, at phone width before publishing.

Also readElementor Stuck on Loading? Safe Checks Before Changing Your Website

Her View

Most visitors from WhatsApp or Instagram will see your site on a phone first. A quick weekly look at your key pages on your own phone catches problems before customers notice them.

His Insight

Overflow can come from one oversized element or several interacting rules. Use developer tools to identify the cause before rewriting a shared stylesheet. Test the repair across affected pages, since a quick visual fix can hide a second issue.

HView Digital Solutions