Three Columns on a Phone

What goes wrong

A row of three columns looks right on a desktop and has to become something else on a phone.

Usually it stacks, which is correct and mostly invisible.

Sometimes it does not, and three columns are squeezed into a phone width, producing columns of a few words each with text broken across every line.

And sometimes it stacks in an order nobody chose, putting the least important block first.

The three failures

• Columns that never stack.
• Stacking in source order, not importance.
• A shrunk image beside shrunk text.
• Equal heights producing empty space.
• Something scrolling sideways off the screen.

The second is the most common and the least noticed, because it looks fine, just wrong. A sidebar defined before the main content in the markup appears above it on a phone, so the first thing anybody sees is the least useful block on the page.

Decide what each row becomes

Deliberately, rather than accepting whatever the framework does.

Three columns of text usually become three stacked blocks, in order of importance.

An image beside text usually becomes the image above the text, unless the text is the point, in which case the reverse.

Four small items can become two rows of two rather than four stacked, which keeps the section from becoming very long.

And a wide table becomes something else entirely, since a table is the one thing that does not stack usefully.

Writing that decision down per row, once, is the difference between a layout that was designed for a phone and one that merely does not break.

Check the stacking order

The specific check worth doing on every page.

Open each page on a phone and read down, noting the order things appear in.

Ask whether somebody who stops after the first two blocks has seen the most important two.

Frequently they have not, because the order came from the desktop layout's left-to-right arrangement rather than from any judgement about priority.

Where the order is wrong, it is usually fixable in the layout settings rather than by rebuilding the page.

This is a five-minute check per page and it is the highest-value item in this whole subject.

A worked example

A business had a service page with a three-column row: an image, a description, and a sidebar of certifications.

On a phone the certifications appeared first, then the image, then the description, because that was the order in the underlying markup.

Somebody arriving from a search saw a list of accreditations before learning what the page was about.

Reordering so the description came first, then the image, then the certifications took one change in the layout settings.

Time on that page rose and the enquiry rate from it improved noticeably over the following months.

Nothing about the desktop version changed at all.

Set a minimum readable width

Since the underlying rule is simple.

A column of text narrower than roughly forty characters becomes unpleasant to read, with words broken and lines ending awkwardly.

On a phone that means one column of text, effectively always.

Two columns can work for short labels, numbers, or small images, where each item is a few words.

Three columns of anything textual do not work at phone width and should always collapse.

If a design requires three columns to remain three columns, the design is wrong rather than the phone.

Watch for the sideways scroll

The failure that is easy to miss and looks broken to everybody who hits it.

A single element wider than the screen makes the whole page scroll sideways, which affects every section rather than just the offending one.

The usual causes are a fixed-width image, a table, a long unbroken address or reference number, or a piece of embedded content.

Test by loading each page on a phone and swiping left, which either does nothing or reveals the problem immediately.

Then find the element, since it is almost always one thing rather than a general layout fault.

This is worth checking after any content change, because a customer pasting a long link into a page can cause it.

Test at the sizes people actually use

Rather than at the two extremes.

The awkward width is not the smallest phone, it is the one where a layout is deciding whether to stack or not.

Resize a browser window slowly from wide to narrow and watch what happens at each transition, which takes a minute and finds most problems.

Check a tablet width in both orientations, since that is where two-column layouts frequently become cramped rather than stacking.

And check on a real phone rather than a simulated one, since text rendering and tap behaviour differ.

Stacked blocks need their own spacing

A detail that decides whether a stacked layout reads as sections or as one long run of text.

Three columns are separated visually by the gap between them, and when they stack that gap disappears and the vertical spacing has to do the work instead.

Frameworks frequently apply generous horizontal gaps and minimal vertical ones, so a stacked layout ends up with blocks running together.

Increase the space between stacked blocks specifically, so each reads as a separate thing rather than as a continuation of the one above.

Where blocks have headings that is less critical, and where they are image and caption pairs it matters a great deal.

The counter-case

Stacking everything is not automatically right.

A page where every row becomes a stacked block gets very long, and somebody scrolling past nine identical blocks may give up before the content they wanted.

Some comparisons genuinely need side-by-side presentation, and a horizontally scrolling table with a clear indicator is better than stacking that destroys the comparison.

And modern layout tools handle most of this automatically, so a well-built recent site may need none of this attention.

Check the stacking order on your top pages, set one column for text, and swipe left to find the sideways scroll.

What to check

1. Open your top pages on a real phone.
2. Read down and note the order.
3. Ask whether the first two blocks are the right two.
4. Reorder in the layout settings.
5. Swipe left to test for sideways scroll.
6. Resize slowly and watch each transition.
7. Never allow three text columns at phone width.

Step three is the one worth doing everywhere, since a page can be technically responsive and still show somebody the least useful block first.

The hardest case to collapse is covered in a table that does not fit.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.