Fixed pixel widths are the usual cause of sideways scrolling on phones. Size boxes with percentages and fr, and text, spacing and breakpoints with rem, so the layout follows both the screen and the reader's font setting (Relative Length Units defines the units). Keep html { font-size: 100% }: a px value there overrides the reader's choice.
| Unit | Use it for | Watch out for |
|---|---|---|
| %, fr | Widths and grid tracks | Percentage heights need a sized parent |
| rem, em | Type, spacing, breakpoints | em compounds when nested |
| ch | Line length, max-width: 65ch | Varies with the font |
| vw, svh, dvh | Full-screen heroes, fluid terms | vw-only text ignores zoom |