Responsive layouts
Every template carries three independent breakpoint documents: laptop, tablet, and mobile. Each one owns its own tree, sizing mode, gutter, and background — they share nothing.
Why container queries
A banner lives in many hosts: a 1200px hero, a 300px sidebar widget, a 728px leaderboard ad. A viewport media query would pick the wrong layout in every case except the first. The renderer measures its own box and picks the tree that fits.
Sizing modes
| Mode | behaviour |
|---|---|
ratio | designHeight / designWidth — the banner keeps the aspect ratio the author designed at. |
viewport | The banner fills the viewport height minus a fixed offset. |
explicit | A fixed pixel height, ignoring the container. |
Forcing a breakpoint
Pass breakpoint to lock one layout:
<BannerRenderer template={template} breakpoint="mobile" />This is required when the container is narrower than 768px and you still want a specific tree — a 300px sidebar widget would otherwise always get mobile, even if you authored a tablet tree for it.
See Document model for the full breakpoint schema.