adapt

Convert multi-column layouts to single-column vertical stacking, replace hover interactions with 44x44px touch targets, and move navigation to a hamburger menu or bottom bar. Prioritize primary content with progressive disclosure and use 16px minimum text size.

Common breakpoints are 320-767px for mobile, 768-1023px for tablet, and 1024px+ for desktop. However, content-driven breakpoints — where the design actually breaks — are preferred over generic device-based values.

Touch targets should be at least 44x44px with adequate spacing between interactive elements. Remove hover-dependent interactions and add touch feedback like ripples or highlights for confirmation.

Remove navigation, footers, and interactive elements, then add page breaks at logical points with proper margins. Expand hidden content, include page numbers and metadata, and convert charts to print-friendly black-and-white versions.

Browser device emulation does not perfectly replicate real hardware behavior, touch handling, or network conditions. Always test on actual phones and tablets across orientations, browsers, and throttled connections.

Use container queries when a component should adapt based on its parent container's size rather than the viewport. This makes components reusable across different layout contexts without viewport-specific breakpoint logic.