Fix footer-legal to span full width and reach the footer's true bottom - #28
Merged
Conversation
Root cause: footer.css's own "footer .footer > div" rule applied its 1240px-max-width/centered/padded box to the shared wrapper div that both the black footer's columns section AND the new footer-legal section sit inside — footer.js flattens the fragment's sections into one plain, unconstrained wrapper div, so that single rule was constraining both sections together as one unit, not each individually. footer-legal's own full-bleed override on .footer-legal-container alone couldn't undo that: the constraint was on their shared *parent*, not on the section itself, so no override on the section could widen it. This also explains the leftover gap at the very bottom — the wrapper's own 32px bottom padding applied once, after whichever section happened to be last. Fix: retarget footer.css's rule to each ".section" child individually (matching how main > .section > div already lets page-level sections like cards-panel differ from each other instead of all sharing one box), so footer-legal's own override can correctly widen just itself. Bumped that override's own specificity to guarantee it wins regardless of stylesheet load order (block CSS loads when each block decorates, and footer-legal decorates as a block nested inside footer's own fragment, so there's no hard guarantee footer.css settles first). Verified at 390px and 1464px: footer-legal now spans the full viewport width and its bottom edge lines up exactly with <footer>'s own bottom (0px gap, was 32px), with the columns section above unaffected. 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.
Commits
|
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
Fixes
footer-legal(the gray band below the black footer, PR #25/#27) so it spans the full page width and reaches the footer's true bottom edge, instead of sitting centered at 1240px with a 32px gap below it.Root cause:
footer.css'sfooter .footer > divrule applied its 1240px-max-width/centered/padded box to the shared wrapper that both the black footer's columns section and the footer-legal section sit inside (footer.jsflattens the fragment's sections into one plain, unconstrained wrapper div) — so that one rule constrained both sections together as a unit, not individually.footer-legal's own full-bleed override on.footer-legal-containeralone couldn't undo that, since the constraint lived on their shared parent, not on the section itself. The same rule's 32px bottom padding, applied once to the wrapper, is also what left the gap after whichever section happened to be last.Fix: retarget the rule to each
.sectionchild individually — the same patternmain > .section > divalready uses to let page-level sections (e.g.cards-panel's own full-bleed override) size independently — sofooter-legal's override can correctly widen just itself. Bumped that override's specificity so it wins regardless of stylesheet load order.Verified at 390px and 1464px: full width, 0px gap to the footer's bottom edge (was 32px), columns section above unaffected.
Test URL
https://footer-legal-full-width--modernization-agent-test--samshao.aem.page/
🤖 Generated with Claude Code