Website Broken on Mobile? How to Fix a Mobile Layout That Does Not Fit

On phones, your site scrolls sideways, has a blank strip down the right edge, shows tiny zoomed-out text, or has sections overlapping and text running off the screen. On a desktop it looks fine.

A mobile layout usually breaks for one of a small set of reasons: a single element is wider than the screen, the page is missing its viewport tag, a builder setting was only made for desktop, an embed or image is not allowed to shrink, or a cache is serving the wrong version. One wide element anywhere on the page is enough to make the whole page scroll sideways, so the job is mostly detective work.

Before you start

• Access you need: a desktop browser with developer tools, your page builder or theme settings, your caching plugin, and at least one real phone.
• Use device mode. In Chrome or Edge, open developer tools (F12) and click the device toolbar icon (or press Ctrl+Shift+M, Cmd+Shift+M on a Mac). Firefox calls it Responsive Design Mode. Pick a common phone size or set the width to 360 or 390 pixels.
• Back up before changing global theme or builder settings.
• Where the code goes. Nothing in this guide runs on the server. The Step 2 snippet is pasted into the browser’s Console tab. The CSS lines in Step 3 go into your builder’s CSS settings for the element, or your theme’s custom CSS (in classic themes, Appearance, Customize, Additional CSS), inside a rule for the element you are fixing, written as SELECTOR { ... }. SELECTOR is the element’s class or ID, which you can read in the Elements panel of developer tools (a class is written with a dot in front, such as .hero-banner).

Step 1: Check the viewport tag

If the whole page looks like a shrunken desktop site with tiny text, check the viewport tag first. View the page source (Ctrl+U, or Cmd+Option+U on a Mac) and search for viewport. You should find:

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

Without it, phone browsers assume the page was designed for a desktop and render it about 980 pixels wide, then shrink it to fit. Every modern theme and builder adds this tag, so if it is missing, something removed it: a custom header template, a “blank canvas” page template, or a plugin that rewrites the head. Restore it through your theme or builder’s header settings.

Do not add maximum-scale=1 or user-scalable=no. They stop visitors zooming in, which is an accessibility problem, and they do not fix layout issues.

Step 2: Find the element that is too wide

If the page scrolls sideways or has a blank strip on the right, something is wider than the screen. In device mode, open the Console tab, paste this snippet exactly as shown and press Enter. There is nothing to change in it. Chrome may refuse the first paste and ask you to type allow pasting before it accepts code; that is a safety check against people being tricked into pasting harmful code, so only do it for code you trust.

const vw = document.documentElement.clientWidth;
document.querySelectorAll('body *').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > vw + 1 || r.left < -1) {
    console.log(Math.round(r.right - vw) + 'px over', el);
    el.style.outline = '2px solid red';
  }
});

It compares every element’s edges with the visible width, lists every element that sticks out (and by how much) in the console, and outlines them in red on the page. Click an entry in the console to jump to it in the Elements panel. Several entries often share one cause: a parent that is too wide makes its children stick out too, so start with the outermost one. Reload the page to remove the outlines.

The snippet only changes the page in your browser. Nothing is saved. If the console prints nothing, no element is wider than the screen at this width; try another phone width, or look for an element that only widens the page after an animation or a tap.

Step 3: Fix the usual suspects

Fixed widths

An element set to width: 1200px or a large min-width cannot shrink. Replace fixed widths with a maximum:

width: 100%;
max-width: 1200px;

As CSS, that becomes SELECTOR { width: 100%; max-width: 1200px; }, with SELECTOR replaced by the element’s class or ID and 1200px by whatever fixed width it had. In a page builder, look for width settings in pixels on sections, containers and columns, and change them to percentages or a max-width. Also look for large left or right margins and padding set in pixels, and negative margins that pull an element past the edge.

Images, videos and embeds

Images and embedded iframes (YouTube, maps, booking widgets) with fixed width attributes overflow on small screens. These rules let them shrink while keeping their shape:

img, video { max-width: 100%; height: auto; }
iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }

These are complete rules: img, video and iframe are the selectors, so paste them as shown into your custom CSS. They apply to every image, video and embed on the site; to limit them to one area, put that area’s selector in front, such as SELECTOR iframe. Most themes include the image rule already. Embeds pasted as HTML code are the usual exceptions. Use an aspect ratio that matches the embed: 16 / 9 suits most video, while maps and forms may need a fixed height instead.

Long words and URLs

A long URL, email address or very long word in a large heading cannot wrap by default and pushes the page wider. Allow it to break:

overflow-wrap: anywhere;

Apply this to the text element or its container, as SELECTOR { overflow-wrap: anywhere; }. For large headings, also reduce the font size at phone breakpoints, or use a fluid size such as font-size: clamp(2rem, 8vw, 4rem);.

Tables

Wide data tables cannot shrink below their content. Wrap them in a container with overflow-x: auto; (as CSS, SELECTOR { overflow-x: auto; }, where SELECTOR is the wrapper’s class) so the table scrolls on its own and the page does not.

100vw

100vw means the full width of the browser window, including the vertical scrollbar on browsers that show one. An element set to width: 100vw is then slightly wider than the page and causes a sideways scroll. Use width: 100% instead. Full-width “breakout” sections built with 100vw and negative margins are a common source.

Animations that start off screen

Slide-in animations often start with the element pushed to the right of the screen. Until the animation runs, it widens the page. Use fade or short-distance animations on mobile, or add overflow-x: clip; to that section (SELECTOR { overflow-x: clip; }, using the section’s class). Treat clipping as a targeted fix on the section, not a blanket rule on body, which hides the symptom and leaves the cause in place.

Step 4: Check builder breakpoint settings

Page builders let you set different values at each breakpoint (the screen widths where the layout changes, such as desktop, tablet and phone). Settings made on desktop usually carry down to smaller screens unless you override them. Common problems:

• A row of four columns that never stacks, because the column width or layout was not changed for phones.
• Large padding, font sizes or fixed heights set on desktop that are too big for a 360-pixel screen.
• Elements positioned absolutely on desktop that overlap on phones.
• Elements hidden on mobile that still load, or visible-on-mobile copies that were never styled.

Switch the builder’s preview to each breakpoint and work through the sections. Also check the breakpoint widths themselves in the builder’s global settings, in case a custom breakpoint was changed.

Step 5: Check for a separate mobile cache

If the layout looks right in device mode but wrong on actual phones (or the reverse), a cache may be mixing versions. Some themes and plugins send different HTML to phones. In that case the caching plugin must keep a separate mobile cache, usually an option called something like “cache mobile separately”. If it is off, phones may get the desktop HTML, or desktops the mobile version. Purge every cache after changing it, including the CDN.

Step 6: Test on a real phone

Device mode is a good approximation, not a perfect one. Test on at least one real iPhone and one Android phone, using mobile data rather than office Wi-Fi so you bypass any local cache. Things only real devices reliably show:

• Browser toolbars and 100vh. Mobile toolbars appear and disappear, so a section set to height: 100vh can be cut off or jump. Newer units such as 100svh (small viewport height) and 100dvh (dynamic) handle this better, and current browsers support them.
• Zoom on form fields. iPhone Safari zooms into a form field when you tap it if the field’s text is smaller than 16 pixels. Set form inputs to at least 16px to stop the page jumping.
• Touch targets. Buttons and links that are easy to click with a mouse can be too small or too close together for a finger.

Still stuck

If you cannot find the cause, or it is buried in theme code, ask whoever built the site or your theme or builder’s support. Send them the page URL, the phone model and browser, a screenshot, and the console output from the Step 2 snippet. That output names the exact element, which saves everyone a lot of guessing.