Merge previously-orphaned carousel-story follow-up fixes - #30
Merged
Merged
Conversation
…e screens The quote-block's dark background reaches the correct CSS position (its computed left offset was already correct — verified via getComputedStyle), but was actually being clipped by .carousel-story-slide's own overflow:hidden, which only spans the slide's centered ~1240px box, not this section's true left edge. The escape distance needed grows with viewport width (it's the centered column's own side margin), so this was invisible/negligible at typical desktop widths but left a very visible gap on wide screens (found by comparing screenshots against fortinet.com side by side). Moves the crossfade's overflow:hidden from the (narrow, centered) slide itself to a new full-bleed .carousel-story-slides-clip wrapper around the whole slides container instead — still contains the stacked slides during the crossfade, but no longer clips the quote-block's own escape to this section's real edge. Verified at 390px, 1464px, and 5114px widths, mid-transition (no bleed between slides), and against fortinet.com directly. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Re-measured svg.customer-dots-bg directly on fortinet.com (relative to its own #banner1): top:312px, height:500px — not "half of the photo" (83 + 515/2 ≈ 340) as an earlier revision assumed. That guess looked reasonable but was off by ~28px, visible when comparing screenshots side by side against fortinet.com at wide viewports. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
fortinet.com sets svg.customer-dots-bg to display:none below 900px (confirmed directly). Ours had no base rule at all for .carousel-story-dots — only the >=900px positioning — so at mobile widths it fell back to default block display with no positioning, rendering as an unstyled, full-viewport-width strip of dots below the slide indicators (spanning x:0 to the full width, with no relation to the photo it's meant to accompany). Adding an explicit display:none base rule, overridden back to display:block only at >=900px, matches the source and removes the mobile-only strip. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…g fortinet.com Measured directly on fortinet.com: the photo and dots overlap horizontally by ~126px (img right edge sits well past the dots' left edge), with the photo stacked above the dots there (img z-index:1000 > dots z-index:999) — so the overlapping portion of the dot pattern is hidden behind the photo, not drawn over it. Our own photo/dots bounding boxes already overlapped by the same ~124px, but .carousel-story-float-photo had no explicit z-index (auto), stacking below .carousel-story-dots' z-index:2 — the opposite of the source, so our dots drew on top of the photo instead of hiding behind it. Giving the photo z-index:3 (just needs to beat the dots' 2, not literally match fortinet's much larger values) fixes the stacking order. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
Root cause: .carousel-story-dots' own right:51px lived directly in .carousel-story (the full-bleed section), so it resolved against that element's true (viewport-wide) right edge — not against the centered 1240px content column the photo itself sits in. That 51px value was measured as a margin from the true edge at one specific viewport width (where it happened to look right), not from the image, so at any other width the true edge moves a different amount than the image's own edge does, and the two drift apart. Confirmed directly: 103px short of the photo's actual right edge at 1920px, correct-looking only close to the width it was tuned at. Fixed the same way .carousel-story-float-photo already solves this exact problem: a new .carousel-story-dots-frame wraps the real .carousel-story- dots, mirroring the photo's own outer wrapper (max-width:1240px, centered) instead of living straight in the full-bleed section. right is now a negative value (-59.29px, poking out past the frame's own edge) rather than 51px, because the correct number isn't a simple margin at all: verified directly on fortinet.com that its own dots and photo overlap by a constant 125.71px regardless of viewport width (identical at both 1464px and 1920px) — recalibrated from that overlap plus the photo's own right:15px and this box's own 200px width, rather than reusing a value that was only ever correct by coincidence at one width. Verified: overlap with the photo is now 125.72px at both 1464px and 1920px (was 125.72 vs a photo-detached -103 before this fix). Mobile unaffected (dots-frame stays display:none there, confirmed zero-size). This branch also had 4 already-tested follow-up commits sitting unmerged since PR #23 was merged at an earlier point on it (see PR #30) — this commit continues on top of those. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PR #23 was merged at an earlier point on the
carousel-story-fixesbranch (commitf9e260a). Four follow-up fixes were pushed to that same branch afterward, verified and reported as shipped at the time, but — since the PR was already merged and closed — never actually made it intomain:ed694d3— Fix quote card background clipping short of the true left edge on wide screens37d4375— Fix dot-grid watermark position to match fortinet.com's measured values (312px/500px, not 340px/496px)fc756b4— Hide dot-grid watermark below 900px, matching fortinet.com43f9b79— Fix photo/dots stacking order so the photo hides the overlap, matching fortinet.comThis PR brings those 4 already-tested commits into
main. No new changes — just closing the gap.Test URL
https://carousel-story-fixes--modernization-agent-test--samshao.aem.page/
🤖 Generated with Claude Code