adapt

Make designs responsive by assessing source assumptions, prioritizing primary content, and applying single-column stacking, CSS Grid, and touch target sizing. Use breakpoint planning around common widths like 375px and 768px to ensure layouts reflow correctly across mobile and tablet devices.

Choosing CSS breakpoints involves identifying target platform screen sizes and applying layout strategies like container queries and Flexbox. Breakpoints should be selected around common device widths, such as 375px for mobile and 768px for tablets, to trigger single-column stacking or master-detail views.

Convert web layouts to email-safe formats by applying platform-specific adaptations that reflow content into a single-column layout. This adaptation ensures interfaces remain usable within constrained email viewports by prioritizing content and avoiding complex responsive techniques like CSS Grid that email clients do not support.

Interactive elements fail on touch devices when designs are simply scaled instead of rethought for new input methods. Fix this by resizing touch targets to 44x44px, implementing bottom navigation, and verifying interactions through real-device testing and orientation checks to ensure accessibility.

Container queries work for adapting components inside constrained viewports by allowing layouts to respond to their parent container size rather than the entire screen. This responsive design technique ensures components remain usable and effective when moved between different page sections or layout contexts.

Simply scaling a design instead of using responsive techniques leads to broken layouts, unusable touch interactions, and poor content prioritization. Limitations arise from ignoring context assumptions like input methods and screen size, requiring rethought layouts using CSS Grid, progressive disclosure, and real-device verification.