Skip to content

Fix footer-legal to span full width and reach the footer's true bottom #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
samshao merged 1 commit into from
Aug 10, 2026
Merged

Fix footer-legal to span full width and reach the footer's true bottom #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 17 additions & 6 deletions blocks/footer-legal/footer-legal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,23 @@
directly from fortinet.com's own .footer-row.copyrights.

This block's own .section wrapper inherits the generic "footer .footer >
div" rule from footer.css (1240px max-width, centered, 48/24/32px
padding) — right for the black footer's columns, but this section is
full-bleed light gray on the source, not centered on white. Overridden
below via the auto-generated {blockname}-container class, with the same
1240px centering re-applied one level in on .footer-legal itself instead. */
footer .footer-legal-container {
div > .section" rule from footer.css (1240px max-width, centered,
48/24/32px padding) — right for the black footer's columns, but this
section is full-bleed light gray on the source, not centered on white.
Overridden below via the auto-generated {blockname}-container class,
with the same 1240px centering re-applied one level in on .footer-legal
itself instead.

Selector repeats footer.css's own "footer .footer > div > .section"
shape (rather than just ".footer-legal-container" alone) so this wins on
specificity regardless of which stylesheet happens to load second —
.footer-legal-container is a strict subset of what .section already
matches on this element, so a shorter selector naming just that class
would tie footer.css's own rule on specificity and then depend on load
order, which isn't guaranteed here (each block's CSS loads when that
block is decorated, and footer-legal decorates as a nested block inside
footer's own fragment, not necessarily strictly after footer.css settles). */
footer .footer > div > .section.footer-legal-container {
max-width: none;
margin: 0;
padding: 0;
Expand Down
14 changes: 12 additions & 2 deletions blocks/footer/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,17 @@ footer {
font-family: var(--body-font-family);
}

footer .footer > div {
/* Targets each section within the footer fragment individually (.section,
not the shared wrapper div itself) — footer.js flattens the fragment's
own sections into one plain wrapper div with no width constraint of its
own, so an earlier revision that put this rule on that wrapper instead
constrained every section inside it to the same 1240px/centered/padded
box as one unit. That's right for the black footer's columns, but wrong
for footer-legal's own full-bleed gray band below it — the two sections
need to size independently, the same way main > .section > div lets
individual page sections (e.g. cards-panel's own full-bleed override)
differ from each other instead of all sharing one box. */
footer .footer > div > .section {
margin: auto;
max-width: var(--content-max-width, 1240px);
padding: 48px 24px 32px;
Expand Down Expand Up @@ -117,7 +127,7 @@ footer .default-content-wrapper > p:last-child a + a::before {
}

@media (width >= 900px) {
footer .footer > div {
footer .footer > div > .section {
padding: 56px 32px 32px;
}

Expand Down