Responsive
One slot in one place in the markup, three different creatives served. The frames below are the real monetized post at real viewport widths — media queries answer to the viewport, so a narrow div would keep serving the desktop unit and prove the opposite of what it looked like it was proving. Scroll each frame; they are live.
The leaderboard serves 320×100 — the mobile unit, not a squeezed 728. The rail has collapsed into the content column, and .ns-ad-rail has taken the skyscraper out with it: ns-post stacks its rail rather than hiding it, so without that class this reader would meet 600 pixels of ad before the first paragraph. The anchor is pinned at the foot, serving 320×100, and the page reserves its clearance.
The leaderboard and the anchor both step to 728×90, the size that fits a 768 viewport with the page gutters intact. Still one column, so the rail unit is still out. The phone-only 320-wide banners are hidden from here up.
970×90 across the top, and past 64rem the rail becomes a real column so the 160×600 skyscraper comes back, sticky against the article. Three placements, one set of markup — nothing was duplicated to get here.
| Format | Phone < 48rem | Tablet ≥ 48rem | Desktop ≥ 64rem |
|---|---|---|---|
--leaderboard | 320×100 | 728×90 | 970×90 |
--billboard | 300×250 | 728×90 | 970×250 |
--square | 250×250 | 300×250 | 300×250 |
--rectangle | 300×250 | 300×250 | 300×250 |
--rectangle-lg | 336×280 | 336×280 | 336×280 |
--halfpage | 300×600 | 300×600 | 300×600 |
--skyscraper | 160×600 | 160×600 | 160×600 |
--skyscraper-sm | 120×600 | 120×600 | 120×600 |
--banner | 320×50 | hidden | hidden |
--banner-lg | 320×100 | hidden | hidden |
--article | fluid, min 250 | fluid, min 250 | fluid, min 250 |
--interstitial | 336×280 | 336×280 | 300×600 if the viewport is ≥ 52rem tall |
The fixed sizes are fixed on purpose: a 300×250 is 300×250 everywhere because that is the creative the ad server has. Only the four formats with a real alternate unit at another width step, and the interstitial steps on viewport height rather than width — a wide-but-short laptop cannot hold a 600px creative inside a dialog that is capped to the screen.