Designing at 375px first: a checklist for mobile layouts
375px is still the width where layouts break first. Why to design and test there, and a checklist for headlines, tap targets, tables and the navigation menu.
Most layouts are designed on a laptop and squeezed onto a phone at the end. The squeeze is where headlines break into five lines, tables scroll sideways and buttons end up too small to tap. Starting at 375px turns those surprises into the first thing you solve.
Why 375
375 CSS pixels is a common width for smaller phones, and it is narrow enough that most layout problems show up there. Some phones are narrower still, so check 320px once too, but 375 is a sensible default for the design itself.
The checklist
- Gutters. 16px on each side, and no element wider than the viewport. One wide element causes horizontal scroll on the whole page.
- Headlines. Use
clamp()for display sizes, and check the longest headline wraps to at most three or four lines. - Tap targets. 44px high for buttons and links a thumb has to hit, with space between them.
- Tables. Turn rows into cards, or let only the table scroll, with a visible hint that it does.
- Navigation. A menu button that opens a real sheet, not a nav hidden with
display: noneand nothing to replace it. - Forms. Inputs at 16px text or larger, or iOS zooms the page when they get focus.
- Images. Set width and height, and serve a smaller file to small screens.
- Both themes. Check light and dark at this width. Dark mode bugs hide on phones.
The one CSS line that finds problems
/* temporary: outline anything wider than the page */
* { outline: 1px solid red; }Add it, scroll the page at 375px, and the element causing sideways scroll is the one sticking out. Remove it before you commit.
The hero at 375
The hero is usually where the most goes wrong: a two-line headline becomes five, the screenshot shrinks to unreadable. Put the headline and button first and keep the image legible. We cover the full hero in a landing page hero that shows the product.
Every screen of this site is checked at 375px in both themes before it ships. Warm Storefront UI carries that rule into the skill, so Claude checks the narrow layout as part of building a screen, not after.
Questions
Why design at 375px?
It is a common narrow phone width in CSS pixels, including many iPhones. A layout that works at 375px usually works on wider phones too, while the reverse is often not true.
What should a mobile tap target measure?
Apple's guidelines recommend at least 44 by 44 points, and WCAG 2.2 sets a minimum of 24 by 24 CSS pixels with spacing. Aim for 44 on anything a thumb has to hit.
How do I test at 375px without a phone?
Browser dev tools have a device toolbar where you can set the width to 375. Test in both light and dark themes, and with a long real piece of content, not placeholder text.