Responsive design is shifting from viewport-driven (media queries) to intrinsic / behavior-driven (the layout adapts to its content and container). AI tools accelerate CSS output but default to the older patterns. This doc covers what changed, the correct modern patterns, and where AI-generated CSS goes wrong.

1. The old model

Layouts switched at fixed breakpoints:

.card { width : 400px ; }

@media ( max-width : 768px ) { .card { width : 100% ; } }

Enter fullscreen mode

Exit fullscreen mode

Problems at scale:

duplicated media queries

inconsistent spacing

specificity wars

rigid, device-specific layouts

2. Utility frameworks solved operations, not responsiveness

Tailwind and similar tools solved consistency, speed, onboarding, predictable spacing — not responsiveness itself.

<div class= "p-4 md:p-6" > ...…