CSS Finally Lets You Design for Foldable Devices

Designing for Dual Screen and Foldable Devices with CSS (2023)

With Google's Pixel Fold launch, Stephanie Stimac revisits CSS features for dual-screen and foldable devices. She explains media queries like horizontal-viewport-segments and vertical-viewport-segments, plus environment variables that calculate display geometry. A recipe page demo shows how to switch to a two-column layout using CSS Grid. Browser support is limited to Microsoft Edge Stable, with Chrome requiring an experimental flag. Stimac argues that foldables are here to stay and that designing for them can set your product apart.