What changed in how responsive sites are built
Most articles on this subject describe three techniques from 2010: fluid grids, flexible images and CSS media queries. Those still work, but they are no longer the whole story, and the change is recent enough to date precisely.
Browser makers publish a shared status for web features called Baseline. A feature is newly available once every major browser supports it, and widely available about thirty months later, when it is safe to use without a fallback. Those dates are public.
From media queries to container queries
A media query asks how wide the screen is, and every breakpoint you have ever seen was written that way.
The problem shows up the moment you reuse a component. A product card in a wide main column and the same card in a narrow sidebar are on the same screen, so a media query cannot tell them apart. For years the fix was extra class names and a lot of guessing.
A container query asks how much space this component has been given. The card in the sidebar stacks, the card in the main column sits side by side, and both use the same code.
Container queries became Baseline widely available on 14 August 2025, with support in Chrome 105, Edge 105, Safari 16 and Firefox 110. That is the most important change in responsive web design in a decade, and almost nothing written for business readers mentions it.
Viewport units that survive mobile browser chrome
Here is an old annoyance. You set a section to fill the screen height, it looks right in testing, then on a phone the address bar slides away and the layout jumps, or a button sits just below the fold where nobody finds it.
That happened because the old full-height unit could not tell whether the browser toolbar was showing. Three units fixed it: one for the smallest the viewport gets, one for the largest, one that follows the change as it happens.
Those units became Baseline widely available on 5 June 2025.
This is the sort of detail that separates a site that feels right on a phone from one that feels almost right, and readers notice the difference without being able to name it.
Fluid type, flexible images and the parts that did not change
Two more useful dates. Subgrid, which lets nested grids line up with their parent, reached Baseline widely available on 15 March 2026. The :has() selector, which lets a layout react to what a component contains, followed on 19 June 2026.
Plenty did not change.
The viewport meta tag is still required, and a site missing it is not responsive whatever else it does. Fluid grids are still how layouts flex, and images still need to be flexible and, on a phone, they still need to be smaller files rather than the same file scaled down, because website performance on a phone is decided mostly by what you send it. Typography still has to stay readable without zooming.
What changed is that these techniques now sit alongside component-level tools instead of doing everything alone. If you are commissioning a redesign, that is the one question worth asking: does this team build components that respond to their own space, or is every layout decision still tied to the width of the screen? Our roundup of web development trends covers where the rest of the front end is heading, and the design tools your team already uses support this way of working.
