A website that shrinks on a phone: the layout fix

A neighborhood restaurant's website was built around 2012, before most people browsed on phones. Every page was a fixed 980-pixel-wide desktop layout: a menu column on the left, the content beside it, the hours and phone number in a strip at the bottom. On a phone the whole thing showed as a tiny shrunken copy of the desktop page - text too small to read, links too small to tap, the "Order online" button a speck in a corner. Customers had to pinch and zoom, and most simply went back to the search results. Here is what was wrong, what changed, and how long it took.

Check yours in thirty seconds: open your home page on your own phone. If the text is too small to read without zooming in, or you can drag the page sideways, the layout was built for a computer screen only. For a second opinion on a computer, open the page in Chrome, press F12 and click the phone-and-tablet icon at the top left of the panel: it shows the page at a phone's width.

Part of the page	Before	After
Page width	fixed at 980px, no mobile setup - the phone shrank the whole page to fit	the mobile setup line added, and the 980px width changed to "up to 980px", so it narrows with the screen
Two-column layout	menu column and content side by side at any width	under 700px the columns stack: content first, the menu column below it
Photos and the menu table	fixed sizes wider than a phone - they pushed the page sideways	photos scale to the screen; the price table scrolls inside its own box
Links and buttons	12px text links packed together - hard to hit with a thumb	16px text, links at least 44px tall, "Order online" a full-width button
Phone number	plain text in the footer strip	a tap-to-call link near the top
Result	Before, the page was a shrunken desktop copy on an iPhone, and with the setup line alone it could be dragged sideways. After, the text reads at normal size, nothing scrolls sideways, and the desktop look is unchanged because every change applies only below phone width.

What was wrong

An older site is often laid out with fixed pixel widths - the page, each column, each photo. A phone browser given such a page assumes it is a desktop site and shrinks it to fit. The usual one-line fix, the "viewport" tag, tells the phone to show the page at its real width - but on a fixed-width layout that only makes things worse: the page is still 980px wide, so now it runs off the right edge and has to be scrolled sideways. The tag is needed, but the layout has to be made to fit too.

The mobile setup line (in the page <head>):
  <meta name="viewport" content="width=device-width, initial-scale=1">

Before (stylesheet):
  #wrapper { width: 980px; }
  #sidebar { float: left; width: 240px; }
  #content { float: left; width: 700px; }

After - the desktop rules stay; these apply only on a phone:
  #wrapper { width: auto; max-width: 980px; }
  img { max-width: 100%; height: auto; }
  @media (max-width: 700px) {
    #columns { display: flex; flex-direction: column; }
    #sidebar, #content { float: none; width: auto; }
    #content { order: -1; }
    body { font-size: 16px; }
    nav a { display: inline-block; padding: 12px 10px; }
    .menu-table { display: block; overflow-x: auto; }
  }

How it was fixed

Measure first: open each main page (home, menu, contact, order) at phone width and list everything wider than the screen - fixed columns, photos, tables, embedded maps and forms.
Add the mobile setup line to the page head, once, in the shared header template.
Turn fixed widths into maximum widths and let photos scale, so nothing is wider than the phone.
Stack the columns below phone width with one block of CSS that only applies on small screens - the desktop design is not touched.
Make the important actions thumb-sized: the phone number, order, booking or directions link near the top and easy to tap.
Re-check every page on a real iPhone and an Android phone, and at phone width in Chrome on a computer.

This works on a hand-built or older WordPress, GoDaddy or Dreamweaver site. On Wix, the same result comes from the separate mobile editor; on Squarespace or a modern theme it is usually one section that was given a fixed width.

What it costs

I will send you the list for your site - each page part that breaks on a phone and what changes - free. If you would rather I do it, it is a fixed price quoted before any work, paid only after the pages fit your own phone. No password shared: your host or site builder lets you add a helper account (or a temporary file-transfer login) that you remove when we are done. Usually one to two days, and your site looks exactly the same on a computer.

The restaurant in this example is a composite built for this demo, not a real business; the fixed-width faults and the fix are the ones found on real small-business home pages in October 2026. More before/after examples, and who I am: all demos.