A sequence that looks poised on a 27-inch studio monitor often collapses on a mobile screen when designers hide captions behind hover tooltips or crop key human gestures out of the frame.
FIG 04. Captions and controls must remain first-class citizens on narrow screens.
| Viewport Range | Slide Grid Structure | Image Aspect Ratio | Control Bar Placement |
|---|---|---|---|
| Large Desktop (> 1025px) | Asymmetric 2-column split (58% image / 42% story) | 16 / 10 or 4 / 3 |
Top header bar with inline status & pill buttons |
| Desktop (769px – 1024px) | Stacked full-width stage above 68ch narrative | 16 / 9 |
Top header bar anchored above image |
| Tablet (481px – 768px) | Single column card with generous 24px padding | 4 / 3 |
Split bar: status on top, pill buttons side-by-side |
| Mobile (< 480px) | Compact vertical stack; full-bleed image stage | 4 / 3 or 1 / 1 |
Full-width touch buttons (min 44px height) |
Hiding slide captions until a mouse cursor hovers over the photograph leaves tablet and smartphone readers with zero context—and blocks screen magnifier users from seeing the image and text cleanly. Always dedicate permanent layout space to your narrative copy.
Sometimes three cards fit comfortably side by side on a 1200px screen, but stack too tall on mobile. Using CSS Grid with grid-auto-flow: column and grid-auto-columns: 85% on screens under 600px lets the second card peek in from the right edge.
Imagine stepping through a four-slide architectural sequence on a laptop. Slide 1 has a two-line caption. Slide 2 has an eight-line caption. If your Previous and Next buttons sit below the caption block, clicking "Next" on Slide 1 causes the buttons to jump 120 pixels down the page. When the reader clicks a second time, their cursor is suddenly clicking empty background space.
The simplest structural remedy is placing the control header—containing the Slide X of Y indicator and the Previous/Next pill buttons—at the top of the carousel container, above both the image and the varying text block. Because the top edge of the carousel never moves when a caption grows taller or shorter, the user's pointer or thumb stays directly over the Next button across all transitions.
Documentary archives rarely consist of uniformly cropped horizontal photographs; a historic letter or vertical portrait will inevitably appear beside a wide landscape map. Instead of letting the image height expand wildly or cropping off heads with aggressive object-fit: cover, create a neutral warm-grey stage container (background-color: #f3f1ec; aspect-ratio: 16 / 10;) and set portrait images to object-fit: contain inside that stage.