Fix green-dots watermark drifting from "100T" at wide viewports by samshao · Pull Request #31 · samshao/modernization-agent-test

samshao · 2026-08-10T15:44:29Z

Summary

Same bug pattern as the carousel-story photo/dots drift fixed in PR #30: the green-dots watermark in the "FortiGuard Labs" section (cards-stat) had left: -55px set directly on .cards-stat-container (the full-bleed dark section), so it resolved against that element's own true left edge — not against the max-width:1200px centered grid that "100T" and the other stats sit in. That value was a margin from the true edge, correct-looking only at the specific width it happened to be measured at.

Confirmed directly: 39px gap from "100T" at 1464px, 267px at 1920px.

Fix: recalibrated via a calc() formula — (100vw - 1200px)/2 gives the stat grid's own left edge (valid since this section is genuinely full-bleed, so its width is the viewport's), offset by "100T"'s own 80px padding, fortinet.com's measured 32px gap, and the watermark's own 228px width. Used calc() instead of a wrapping reference element (the approach used for carousel-story) since the existing comments here already flag why giving these wrappers their own positioning would risk lifting the picture's paint layer above the stat-grid block that follows it in DOM order.

Checked fortinet.com directly: its own first stat number and green-dots watermark stay a constant 32px apart at both 1464px and 1920px.

Verified: gap between "100T" and the watermark is now 32px at both widths (was 39px vs 267px). Mobile unaffected (fix scoped to the existing >=900px media query).

Test URL

https://cards-stat-dots-position--modernization-agent-test--samshao.aem.page/

🤖 Generated with Claude Code

Same root cause and fix pattern as the carousel-story photo/dots drift: left:-55px lived directly in .cards-stat-container (the full-bleed section), so it resolved against that element's own true edge — not against the max-width:1200px centered grid "100T" and the other stats sit in. That value was a margin from the true edge, correct-looking only at the specific viewport width it was measured at; at any wider width the true edge moves further from the grid's own edge than the grid's does, dragging this watermark away from "100T" the wider the screen gets. Confirmed directly: 39px gap from "100T" at 1464px, 267px at 1920px. Fixed via a calc() formula instead of a wrapping reference element (the approach used for carousel-story's analogous fix) — the existing comments on .cards-stat-container's own wrappers already flag why giving them their own position would risk lifting the picture's paint layer above the stat-grid block that follows it in DOM order, so introducing a new positioned wrapper here isn't the lower-risk option it was for carousel-story. (100vw - 1200px)/2 is the grid's own left edge (standard centering math, valid because this section is genuinely full-bleed so its own width is the viewport's), then offset by "100T"'s own 80px padding, fortinet.com's measured 32px gap, and this image's own 228px width. fortinet.com's real gap between its first stat number and its own green-dots watermark is a constant 32px, verified directly at both 1464px and 1920px (identical both times) — recalibrated from that real, width-independent relationship rather than reusing a value that only happened to look right at one width. Verified: gap between "100T" and the watermark is now 32px at both 1464px and 1920px (was 39px vs 267px before this fix). Mobile unaffected (fix is scoped to the existing >=900px media query). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

aem-code-sync · 2026-08-10T15:44:33Z

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.