My Website Looks Broken on Mobile: Sideways Scrolling, Overflowing Text and Fixes

If your website looks broken on mobile, the cause is most likely one of these: something on the page is wider than the screen (an image, table, map or video), the page builder's mobile settings were never done, the theme's code uses fixed widths, or the page is missing the mobile viewport tag. The first three are fixed with a few settings. The fourth, and a site that simply wasn't built for mobile, usually signal that it's time for a redesign.

This isn't cosmetic. Most web traffic in Türkiye comes from phones, and Google evaluates sites primarily by their mobile version. A site that is broken on mobile is broken for most of its visitors.

Describe the symptom

Describing the problem is half the fix. Open the site on your phone and note which of these you see:

• The page slides sideways and there's an empty strip on the right.
• Text overflows the screen or is very small.
• Images get cut off or overlap.
• The menu button doesn't open, or the menu stops halfway down the screen.
• Buttons are too close together and you tap the wrong one.
• A pop-up covers the screen and can't be closed.
• The site is broken only on iPhone, or only in one Android browser.

Each symptom has a different cause. We start with the most common.

If the page slides sideways: something is wider than the screen

This is the most common symptom. When a single element is wider than the screen, the whole page starts scrolling sideways. Typical culprits:

• An image with a fixed pixel width (say, 1200 pixels).
• A table with many columns. Price lists and technical tables are the usual suspects.
• Embed code copied from Google Maps or YouTube. It usually comes with a fixed width and height.
• A long word that can't break: an email address, a long URL, an IBAN.
• A fixed width or negative margin given to a section in the page builder.

To find the overflowing element, open the page in Chrome, press F12 for developer tools, and click the phone icon at the top left to switch to mobile view. As you scroll, you'll usually spot the element sticking out to the right. Right-click it and choose 'Inspect' to see which section it is.

The fix depends on the element. Images with a maximum width of 100 percent, tables wrapped in a horizontally scrollable box, embed codes set to 100 percent width, and long words allowed to break at the end of a line. These are done in the theme or page builder settings, or with a few lines of CSS.

The page builder's mobile settings

Page builders like Elementor, Divi and WPBakery keep separate desktop, tablet and mobile settings for each section. If the page was designed on desktop and nobody looked at mobile view, a 72-point heading stays 72 points on a phone and a four-column layout squeezes into four thin columns.

Switch to mobile view with the device icon at the bottom of the editor and check every section. Common fixes:

• Reduce heading sizes on mobile.
• Stack side-by-side columns on mobile.
• Reduce large desktop padding on mobile.
• Simplify sections on mobile rather than hiding them.

The viewport tag and old themes

If the page source has no line containing name='viewport', the phone draws the page at desktop width and shrinks it. Everything looks tiny and users have to zoom. Right-click the page, view the source and search for viewport.

If the tag is missing, the site probably runs on an old theme built without mobile in mind. Adding the tag alone isn't enough; the content then piles up awkwardly on a narrow screen. In that case the problem is solved not by individual fixes but by renewing the theme or the site. To decide, see the signs in is it time to redesign your site.

If it's broken on only one device

• If a cache plugin serves the same page to mobile and desktop, a theme with separate mobile settings may show the wrong version. Clear the cache and try again.
• If a section meant to fill the whole screen on iPhone sits under the address bar, it's because Safari calculates screen height differently. A current version of the theme usually fixes this.
• Samsung Internet's dark mode can change your site's colours on its own. If your site doesn't support dark mode, colours may look odd in that browser.

The menu won't open, buttons can't be tapped

Mobile menus run on JavaScript. A plugin or optimisation tool that combines and defers JavaScript files is the most common reason menus break. Temporarily switch off the JavaScript settings in your optimisation plugin and try again.

Button spacing is a matter of measurement. Touch targets at least 44 to 48 pixels tall, with space between them, prevent mistaps.

How to test after fixing

Google's old Mobile-Friendly Test tool and the mobile usability report in Search Console were retired at the end of 2023. Today the practical approach has three layers:

• Try several screen widths in Chrome's developer tools mobile view (360, 390 and 430 pixels are a good start).
• Run the mobile tab in PageSpeed Insights.
• Test on real phones: at least one iPhone and one Android.

We cover testing methods in detail in mobile-friendly site testing. Slow loading on mobile is a separate problem; for that, see how to speed up a slow website.

We can assess together whether your site can be saved with individual fixes or needs a redesign. You can open examples of sites we've built in our portfolio on your phone and try them yourself. In our corporate website package, mobile-friendly design is a standard part of the scope.