From e3f80bf16af65346f262f98c0c667e64a76487e2 Mon Sep 17 00:00:00 2001 From: Samuel Wanjohi Date: Sat, 13 Jun 2026 21:24:05 +0300 Subject: [PATCH] fix(a11y): prevent carousel caption text truncation at high zoom The home page carousel caption is position:absolute, so it does not contribute to the carousel height; the carousel height comes from the image. At high zoom the "Recent Posts" slide (heading + four stacked post columns) grows taller than the image and is clipped by .carousel-inner{overflow:hidden}, truncating the text. Below Bootstrap's md breakpoint (<=991px, which includes 400% zoom of a 1280px viewport per WCAG 1.4.10 Reflow) the post columns stack, so make the caption flow in normal document flow (position:static, no negative margins, no max-height). The carousel container then grows to fit the caption and nothing is clipped. The >=992px desktop overlay is unchanged. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- public/css/site.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/public/css/site.css b/public/css/site.css index 6193eac..affbd6f 100644 --- a/public/css/site.css +++ b/public/css/site.css @@ -494,4 +494,17 @@ td { margin: 10px; font-weight: bold; color: green; +} + +/* When the "Recent Posts" columns stack (below Bootstrap's md breakpoint, i.e. + <=991px, which includes 400% zoom on a 1280px viewport per WCAG 1.4.10 + Reflow), let the carousel caption flow below the image instead of being + clipped by the fixed-height absolute overlay, so its text is not truncated. */ +@media (max-width: 991px) { + .carousel-caption { + position: static; + margin: 0; + max-width: none; + max-height: none; + } } \ No newline at end of file