Fix a layout that breaks on a phone

That inheritance is why a page can look finished on a laptop and be unusable on a phone without anything having gone wrong.

The model

Styling has four levels, and three of them are overrides.

You never restate a value that is not changing. A phone override that lists twenty properties is nineteen properties of future maintenance for nothing.

The four things that break

Multi-column layouts. Three columns at 1200 pixels wide are three unreadable slivers at 375. Override the column count to one on phone.

Fixed widths. A block pinned to 900 pixels wide overflows a 375 pixel screen and drags a horizontal scrollbar across the whole page. Override the width, or remove it and let the block fill its container.

Large padding. Padding of 80 pixels on each side leaves 215 pixels of usable width on a phone. Cut it to roughly 24.

Headline sizes. A headline sized for a hero banner wraps into six lines and pushes everything below the fold. Give phone its own smaller size.

Check it properly

Narrow the browser window to 375 pixels wide and read the page top to bottom. Two failures matter more than the rest.

Then run a web audit, which checks the same page against accessibility and performance rules a visual check misses.

One trap worth naming

Styling written as raw Cascading Style Sheets (CSS) in a block's custom css field cannot be overridden by a phone or tablet rule. The breakpoint system only operates on the named options.

So a width set through the named size option is fixable at every screen size, and the same width written as raw CSS is fixed at every screen size. Prefer the named option whenever both can express what you want, which is nearly always.

Next