Container Queries Change How Modules Respond

For fifteen years, responsive design asked one question: how wide is the screen? It was always the wrong question. The right one is: how wide is the space this component actually has?

The column is the real viewport

In a drag-and-drop editor, the same module might live full-width on one page and inside a third-width column on another. Viewport media queries cannot tell the difference — container queries can.

Peerless modules are moving to container-based breakpoints: a card grid stacks when its column gets narrow, regardless of the screen size around it. Editors rearrange layouts freely and the modules simply adapt.

What you will notice

Fewer surprises. A module that looks right in the sidebar looks right in the hero, without a developer writing special cases for each placement.

A concrete example

Take the Peerless card grid. Placed full-width it shows three cards across; drag the same module into a half-width column and it drops to two — not because a developer predicted that placement, but because the module watches its own container. The editor experience gets simpler too: no more “looks broken on tablet” tickets caused by a module that only knew about phones and desktops.

New to the theme? Start with getting started with Peerless — container behavior is already wired in.