Page 7
Responsive stress test
Each block changes behaviour at 1024, 640 and 390px. Labels state the expected behaviour per breakpoint.
R-01 · 4 → 2 → 1 columns (1024 / 640)
One
Column content.
Two
Column content.
Three
Column content.
Four
Column content.
R-02 · Fluid type (clamp) vs stepped type (media queries)
Fluid clamp() headline scales smoothly
Stepped headline jumps at breakpoints
R-03 · Device-only visibility
Visible on desktop only (> 1024px)
Visible on tablet only (641–1024px)
Visible on mobile only (≤ 640px)
R-04 · Image + text reflow, image order flips on mobile
Text first on desktop
On phones the image moves above the text using CSS order.
R-05 · Narrow-screen overflow risks
Supercalifragilisticexpialidocious-unbreakable-string-https://example.com/a/very/long/path/that/should/wrap
| Breakpoint | Columns | Font | Gutter | Nav | Hero |
|---|---|---|---|---|---|
| 1440 | 4 | 18px | 32px | Inline | 2 col |
| 1024 | 2 | 17px | 24px | Inline | 1 col |
| 390 | 1 | 16px | 16px | Toggle | 1 col |
Padding 80px desktop → 40px tablet → 16px phone