From e1df9b5958c4c155a94b93a8fc35f0c0a96b8462 Mon Sep 17 00:00:00 2001 From: vahid-ahmadi Date: Wed, 26 Aug 2026 13:36:18 +0100 Subject: [PATCH] Use a container query for the metric strip, not a viewport one My own fix in #187 reintroduced the bug it repaired. I added @media (min-width: 1500px) to restore the four-up strip on large screens, on the assumption that a wide viewport means a wide column. It does not: the column width is set by the scrolly grid. Measured on the live page at a 1728px viewport, that query matched while the column was still 562px, so the strip went back to four-up and clipped again -- exactly the failure mode, from the other side. The column width is a container property, so this has to be a container query. Two-up is now the floor, and four-up returns only when the column itself passes 700px. Verified against the live DOM: container queries supported, column 588px, columns resolve to 281px + 281px, scrollWidth 562 == clientWidth, no clipping. --- style.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/style.css b/style.css index 7e02463..2b50a0f 100644 --- a/style.css +++ b/style.css @@ -2956,9 +2956,16 @@ td.vc-warn, th.vc-warn { color: var(--brand-warning); font-weight: 600; } /* Inside a scrollytelling column the 4-up strip has ~560px, not the full band width, and it needs ~660px: the viewport media query above cannot see that, so the fourth stat was being clipped (overflow-x is visible here, so it did - not even scroll). Two-up fits and keeps the stats legible. */ + not even scroll). + The column width is set by the scrolly grid, NOT by the viewport, so this + has to be a CONTAINER query. A first attempt used @media (min-width:1500px) + to restore 4-up on big screens and reintroduced the same bug from the other + side: at a 1728px viewport the query matched while the column was still + 562px, and the strip clipped again. Two-up is the floor; 4-up returns only + when the column itself is wide enough to hold it. */ +.scrolly-steps { container-type: inline-size; } .scrolly-steps .vmet-strip { grid-template-columns: repeat(2, 1fr); } -@media (min-width: 1500px) { +@container (min-width: 700px) { .scrolly-steps .vmet-strip { grid-template-columns: repeat(4, 1fr); } }