Demo

Dual Screen Layout & CSS Media Queries

This demo was originally built to accompany an in-depth article for Smashing Magazine. It uses CSS media queries for horizontal viewport segments to split a recipe across two screens on foldable devices.

Open this demo in the Microsoft Edge DevTools and select Surface Duo under device emulation. Ensure the experimental web platform features flag is enabled if opening in another Chromium-based browser or Surface Duo device emulation won't work properly.

View live demo Back to projects