From a7a10ea2c8f5984bb7f1d0ab751b67e285856f30 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 11:04:12 +0000 Subject: [PATCH 01/15] Remove container and fix content position --- .../list-groups/ListGroupFooterBottom.tsx | 61 +++++++++---------- src/app/components/navigation/Footer.tsx | 13 +--- src/scss/common/footer.scss | 23 ++++--- 3 files changed, 45 insertions(+), 52 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index ee89d5a79f..1f218ed911 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,37 +35,34 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
- - -

Links

- {footerLinks.right} - - -

- All teaching materials on this site are available under the{" "} - - Open Government Licence v3.0 - - , except where otherwise stated. -

- - - - - National Centre for Computing Education website - - - UK Department for Education + + +

Links

+ {footerLinks.right} + + +

+ All teaching materials on this site are available under the{" "} + + Open Government Licence v3.0 - - -

+ , except where otherwise stated. +

+ + + + + National Centre for Computing Education website + + + UK Department for Education + + + STEM Learning + + + ); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 7d48406fc4..dcf577d538 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -4,7 +4,7 @@ import { ListGroupFooter } from "../elements/list-groups/ListGroupFooter"; import { ListGroupSocial } from "../elements/list-groups/ListGroupSocial"; import { ListGroupFooterBottom } from "../elements/list-groups/ListGroupFooterBottom"; import { Link } from "react-router-dom"; -import { ExternalLink } from "../elements/ExternalLink"; +// import { ExternalLink } from "../elements/ExternalLink"; export const Footer = () => ( ); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 94793faa01..b6ac32abfe 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -85,18 +85,18 @@ } } -.footer-bottom { +.footer-bottom h2 { background-color: white; width: 100%; + - .h5 { + h2 { color: black; font-family: $footer-links-font; font-size: 20px; } - .footer-bottom-info { - p { + .footer-bottom-info p{ font-family: $footer-text-font; font-size: 14px; color: #000000; @@ -104,7 +104,7 @@ @include respond-above(md) { width: 40%; } - } + .footer-bottom-logos { @include respond-above(md) { width: 30%; @@ -122,6 +122,13 @@ } } +.footer-bottom-links h2{ + color: black; + font-family: $footer-links-font; + font-size: 20px; + padding-right: 30px; + } + .print-font { font-family: $footer-bold-font; color: black !important; @@ -169,8 +176,7 @@ padding-top: 0.5rem !important; } - .footer-links .footer-support-links .h5, - .footer-bottom-links .h5 { + .footer-links .footer-support-links .h5 { margin-bottom: 15px; text-align: left; } @@ -203,8 +209,7 @@ padding-top: 0.5rem !important; } - .footer-links .footer-support-links .h5, - .footer-bottom-links .h5 { + .footer-links .footer-support-links .h5 { margin-bottom: 15px; text-align: left; } From f811a1bd9f6ae8586465d6857c800bb4c9a1d1c8 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 11:28:18 +0000 Subject: [PATCH 02/15] Adjust the styling and positioning of content --- .../list-groups/ListGroupFooterBottom.tsx | 37 ++++++++++--------- src/scss/common/footer.scss | 4 +- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 1f218ed911..c031eed99e 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,23 +35,26 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( - - -

Links

- {footerLinks.right} - - -

- All teaching materials on this site are available under the{" "} - - Open Government Licence v3.0 - - , except where otherwise stated. -

- + +
+ +

Links

+ {footerLinks.right} + + + +

+ All teaching materials on this site are available under the{" "} + + Open Government Licence v3.0, + +

+

except where otherwise stated.

+ +
diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index b6ac32abfe..b9806b1f2e 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -5,6 +5,9 @@ color: white; } +.footerBottom { + margin-left:270px +} .footer-links { color: white; @@ -143,7 +146,6 @@ .footer-bottom-logos img { height: auto; width: auto; - max-width: 90%; padding-left: 14px; } } From bf81ab7d7604853d6aa53dde15c53ee29e589552 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 16:59:08 +0000 Subject: [PATCH 03/15] Remove underline from all the footer bottom links --- .../components/elements/list-groups/ListGroupFooterBottom.tsx | 2 +- src/scss/common/footer.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index c031eed99e..87374a6090 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -47,7 +47,7 @@ export const ListGroupFooterBottom = () => ( All teaching materials on this site are available under the{" "} Open Government Licence v3.0, diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index b9806b1f2e..50f939c431 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -119,6 +119,7 @@ .footer-bottom-links a { color: black; padding-right: 30px; + text-decoration: none; &:hover { color: black; From daa82a9a850e83606eca440ae5a2ef95ffc814d3 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 17:07:19 +0000 Subject: [PATCH 04/15] Make footer responsive on smaller screens --- .../list-groups/ListGroupFooterBottom.tsx | 68 +++---- src/scss/common/footer.scss | 167 +++++++++++++----- 2 files changed, 163 insertions(+), 72 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 87374a6090..ecdf110be4 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,37 +35,43 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( - -
- -

Links

- {footerLinks.right} - +
+ +
+ +

Links

+ {footerLinks.right} + - -

- All teaching materials on this site are available under the{" "} - - Open Government Licence v3.0, - -

-

except where otherwise stated.

- -
+ +

+ All teaching materials on this site are available under the{" "} + + Open Government Licence v3.0, + {" "} + except where otherwise stated. +

+ +
- - - National Centre for Computing Education website - - - UK Department for Education - - - STEM Learning - - - + + + National Centre for Computing Education website + + + UK Department for Education + + + STEM Learning + + + +
); diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 50f939c431..43d62f9246 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -6,8 +6,11 @@ } .footerBottom { - margin-left:270px + background-color: white; + width: 100%; + overflow-x: hidden; // Prevent horizontal scroll } + .footer-links { color: white; @@ -75,6 +78,99 @@ } } +.footer-bottom-wrapper { + width: 100%; + padding-left: 15px; + padding-right: 15px; + + @media (min-width: 990px) { + padding-left: 0; + padding-right: 0; + margin-left: 70px; + } + + @media (min-width: 1700px) { + margin-left: 270px; + } +} + +.footer-bottom-list { + margin: 0; + width: 100%; + + @media (min-width: 990px) { + margin-right: calc(-100vw + 100% + 70px); + width: calc(100vw - 70px); + } + + @media (min-width: 1700px) { + margin-right: calc(-100vw + 100% + 270px); + width: calc(100vw - 270px); + } +} + +.footer-bottom-left { + padding-left: 0; + padding-right: 15px; + + @media (min-width: 768px) { + flex-shrink: 0; + } +} + +.footer-bottom-links { + h2 { + color: black; + font-family: $footer-links-font; + font-size: 20px; + padding-right: 30px; + margin-bottom: 0; + } + + a { + color: black; + padding-right: 30px; + text-decoration: none; + + &:hover { + color: black; + } + } +} + +.footer-bottom-info { + p { + font-family: $footer-text-font; + font-size: 14px; + color: #000000; + margin-bottom: 0; + } +} + +.footer-bottom-logos { + display: flex; + flex-direction: row; + align-items: center; + gap: 0.875rem; + padding-right: 0 !important; + flex-shrink: 0; + + @media (min-width: 768px) { + justify-content: flex-end; + } + + img { + flex-shrink: 0; + max-width: 100%; + height: auto; + + @media (min-width: 990px) { + padding-left: 14px; + max-width: none; + } + } +} + .logo-text { color: white; font-family: $footer-text-font; @@ -151,11 +247,8 @@ } } +// Responsive adjustments for tablet (769px - 989px) @media only screen and (min-width: 769px) and (max-width: 989px) { - .links-col { - padding-top: 0.5rem !important; - } - .footer-bottom-info { p { padding-bottom: 1.5rem !important; @@ -164,29 +257,23 @@ .footer-bottom-logos { padding-bottom: 1.5rem; - } - - .footer-bottom-logos img { - height: auto; - width: auto; - max-width: 90%; - padding-left: 14px; + + img { + padding-left: 14px; + } } } +// Responsive adjustments for mobile/tablet (480px - 768px) @media only screen and (min-width: 480px) and (max-width: 768px) { - .links-col { - padding-top: 0.5rem !important; - } - - .footer-links .footer-support-links .h5 { - margin-bottom: 15px; - text-align: left; - } - - .footer-links .footer-support-links a, - .footer-bottom-links a { - margin-bottom: 10px; + .footer-bottom-links { + h2 { + margin-bottom: 15px; + } + + a { + margin-bottom: 10px; + } } .footer-bottom-info { @@ -197,33 +284,31 @@ .footer-bottom-logos { padding-bottom: 1.5rem; - margin-left: 5%; gap: 1.25rem; + justify-content: flex-start; } - } +// Responsive adjustments for small mobile (max-width: 480px) @media only screen and (max-width: 480px) { - .logo-col { - padding: 20px !important; - } - - .links-col { - padding-top: 0.5rem !important; - } - - .footer-links .footer-support-links .h5 { - margin-bottom: 15px; - text-align: left; + .footer-bottom-wrapper { + padding-left: 15px; + padding-right: 15px; } - .footer-links .footer-support-links a, - .footer-bottom-links a { - margin-bottom: 10px; + .footer-bottom-links { + h2 { + margin-bottom: 15px; + } + + a { + margin-bottom: 10px; + } } .footer-bottom-logos { gap: 1.25rem; - margin-left: 5%; + justify-content: flex-start; + flex-wrap: wrap; } } \ No newline at end of file From 6241d17c2d7e3b2982f0a6d597556fa4c18e5ae8 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 17:09:14 +0000 Subject: [PATCH 05/15] split the footer info in separate paragraphs --- .../components/elements/list-groups/ListGroupFooterBottom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index ecdf110be4..8095d136e3 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -52,8 +52,8 @@ export const ListGroupFooterBottom = () => ( > Open Government Licence v3.0, {" "} - except where otherwise stated.

+

except where otherwise stated.

 From 597d4ea931898d699b484a7c8e70caf270bac3bf Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 21:51:49 +0000 Subject: [PATCH 06/15] Add styling for medium sized screen --- .../list-groups/ListGroupFooterBottom.tsx | 7 +- src/scss/common/footer.scss | 75 ++++++++++++++++++- 2 files changed, 77 insertions(+), 5 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 8095d136e3..8f4133817a 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -51,9 +51,10 @@ export const ListGroupFooterBottom = () => ( className="d-inline fw-bold print-font text-decoration-none" > Open Government Licence v3.0, - {" "} + +
+ except where otherwise stated.

-

except where otherwise stated.

@@ -69,7 +70,7 @@ export const ListGroupFooterBottom = () => ( UK Department for Education - STEM Learning + STEM Learning diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 43d62f9246..b3cfa12a18 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -98,6 +98,11 @@ margin: 0; width: 100%; + // Medium screens - ensure proper spacing + @media (min-width: 768px) and (max-width: 1024px) { + gap: 1rem; + } + @media (min-width: 990px) { margin-right: calc(-100vw + 100% + 70px); width: calc(100vw - 70px); @@ -113,7 +118,13 @@ padding-left: 0; padding-right: 15px; - @media (min-width: 768px) { + @media (min-width: 768px) and (max-width: 1024px) { + flex-shrink: 1; + min-width: 0; + padding-right: 10px; + } + + @media (min-width: 1025px) { flex-shrink: 0; } } @@ -159,6 +170,26 @@ justify-content: flex-end; } + // Medium screens (768px - 1024px) - allow shrinking and reduce gap + @media (min-width: 768px) and (max-width: 1024px) { + flex-shrink: 1; + min-width: 0; + gap: 0.5rem; + padding-left: 10px; + + img { + max-width: 80px; + height: auto; + object-fit: contain; + } + + // STEM logo specific sizing for medium screens + .logo-mr { + max-height: 60px; + width: auto; + } + } + img { flex-shrink: 0; max-width: 100%; @@ -257,9 +288,49 @@ .footer-bottom-logos { padding-bottom: 1.5rem; + gap: 0.5rem; img { - padding-left: 14px; + padding-left: 8px; + max-width: 75px; + height: auto; + } + + .logo-mr { + max-height: 55px; + width: auto; + } + } +} + +// Responsive adjustments for medium tablets (990px - 1024px) +@media only screen and (min-width: 990px) and (max-width: 1024px) { + .footer-bottom-wrapper { + padding-left: 15px; + padding-right: 15px; + } + + .footer-bottom-list { + width: 100%; + margin-right: 0; + } + + .footer-bottom-left { + padding-right: 10px; + } + + .footer-bottom-logos { + gap: 0.5rem; + + img { + max-width: 90px; + height: auto; + padding-left: 8px; + } + + .logo-mr { + max-height: 70px; + width: auto; } } } From d7a65310d0d884f352d62dfadc0d72b549535c60 Mon Sep 17 00:00:00 2001 From: Madhura Date: Tue, 2 Dec 2025 22:37:56 +0000 Subject: [PATCH 07/15] Adjust logo positions on the medium screen sizes --- .../list-groups/ListGroupFooterBottom.tsx | 2 +- src/scss/common/footer.scss | 164 +++++++++++++++++- 2 files changed, 156 insertions(+), 10 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 8f4133817a..988e318b81 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -38,7 +38,7 @@ export const ListGroupFooterBottom = () => (
- +

Links

{footerLinks.right} diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index b3cfa12a18..794b628a23 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -83,6 +83,11 @@ padding-left: 15px; padding-right: 15px; + // Remove right padding on medium screens to allow logos to touch edge + @media (min-width: 768px) and (max-width: 1024px) { + padding-right: 0; + } + @media (min-width: 990px) { padding-left: 0; padding-right: 0; @@ -98,9 +103,12 @@ margin: 0; width: 100%; - // Medium screens - ensure proper spacing + // Medium screens - ensure proper spacing and alignment, extend to right edge @media (min-width: 768px) and (max-width: 1024px) { gap: 1rem; + align-items: flex-end; // Align sections to bottom + margin-right: calc(-100vw + 100%); + width: calc(100vw - 15px); // Account for left padding of wrapper } @media (min-width: 990px) { @@ -136,6 +144,12 @@ font-size: 20px; padding-right: 30px; margin-bottom: 0; + + // Reduce font size on medium screens + @media (min-width: 768px) and (max-width: 1024px) { + font-size: 18px; + padding-right: 20px; + } } a { @@ -143,6 +157,12 @@ padding-right: 30px; text-decoration: none; + // Reduce font size and padding on medium screens + @media (min-width: 768px) and (max-width: 1024px) { + font-size: 14px; + padding-right: 20px; + } + &:hover { color: black; } @@ -155,6 +175,12 @@ font-size: 14px; color: #000000; margin-bottom: 0; + + // Reduce font size on medium screens + @media (min-width: 768px) and (max-width: 1024px) { + font-size: 12px; + line-height: 1.4; + } } } @@ -176,16 +202,44 @@ min-width: 0; gap: 0.5rem; padding-left: 10px; + align-items: flex-end; // Align logos to bottom of container + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + align-self: flex-end; // Align this container to bottom of parent + min-height: fit-content; // Allow container to grow to fit content + + // Target ExternalLink wrappers + > a { + display: flex; + align-items: flex-end; // Align each logo to bottom + margin: 0; + padding: 0; + + // Second ExternalLink (DFE logo) - allow full height + &:nth-of-type(2) { + img { + max-width: 90px !important; + max-height: none !important; // Remove height constraint + height: auto !important; + } + } + } img { max-width: 80px; height: auto; object-fit: contain; + display: block; + margin: 0; + vertical-align: bottom; // Ensure bottom alignment } // STEM logo specific sizing for medium screens .logo-mr { - max-height: 60px; + max-height: none; // Remove height constraint + height: auto; width: auto; } } @@ -280,24 +334,66 @@ // Responsive adjustments for tablet (769px - 989px) @media only screen and (min-width: 769px) and (max-width: 989px) { + .footer-bottom-links { + h2 { + font-size: 18px; + padding-right: 20px; + } + + a { + font-size: 14px; + padding-right: 20px; + } + } + .footer-bottom-info { p { padding-bottom: 1.5rem !important; + font-size: 12px; + line-height: 1.4; } } .footer-bottom-logos { - padding-bottom: 1.5rem; + padding-top: 0; + padding-bottom: 0; gap: 0.5rem; + align-items: flex-end; // Align logos to bottom + margin-top: 0; + margin-bottom: 0; + align-self: flex-end; // Align container to bottom + min-height: fit-content; + + // Target ExternalLink wrappers + > a { + display: flex; + align-items: flex-end; // Align each logo to bottom + margin: 0; + padding: 0; + + // Second ExternalLink (DFE logo) + &:nth-of-type(2) { + img { + max-width: 85px !important; + max-height: none !important; // Remove height constraint + height: auto !important; + } + } + } img { padding-left: 8px; max-width: 75px; height: auto; + object-fit: contain; + display: block; + margin: 0; + vertical-align: bottom; } .logo-mr { - max-height: 55px; + max-height: none; // Remove height constraint + height: auto; width: auto; } } @@ -306,30 +402,80 @@ // Responsive adjustments for medium tablets (990px - 1024px) @media only screen and (min-width: 990px) and (max-width: 1024px) { .footer-bottom-wrapper { - padding-left: 15px; - padding-right: 15px; + padding-left: 0; + padding-right: 0; + margin-left: 70px; } .footer-bottom-list { - width: 100%; - margin-right: 0; + margin-right: calc(-100vw + 100% + 70px); + width: calc(100vw - 70px); + align-items: flex-end; // Align sections to bottom } .footer-bottom-left { padding-right: 10px; } + .footer-bottom-links { + h2 { + font-size: 18px; + padding-right: 20px; + } + + a { + font-size: 14px; + padding-right: 20px; + } + } + + .footer-bottom-info { + p { + font-size: 12px; + line-height: 1.4; + } + } + .footer-bottom-logos { gap: 0.5rem; + align-items: flex-end; // Align logos to bottom + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + align-self: flex-end; // Align container to bottom + min-height: fit-content; + + // Target ExternalLink wrappers + > a { + display: flex; + align-items: flex-end; // Align each logo to bottom + margin: 0; + padding: 0; + + // Second ExternalLink (DFE logo) + &:nth-of-type(2) { + img { + max-width: 100px !important; + max-height: none !important; // Remove height constraint + height: auto !important; + } + } + } img { max-width: 90px; height: auto; padding-left: 8px; + object-fit: contain; + display: block; + margin: 0; + vertical-align: bottom; } .logo-mr { - max-height: 70px; + max-height: none; // Remove height constraint + height: auto; width: auto; } } From d421d1fdbe1c21ed9fd5aa2e46c3727a7ee4519c Mon Sep 17 00:00:00 2001 From: Madhura Date: Wed, 3 Dec 2025 11:18:14 +0000 Subject: [PATCH 08/15] Adjust the spacing between logos --- src/scss/common/footer.scss | 194 ++++++++++++++++++++++++++++-------- 1 file changed, 155 insertions(+), 39 deletions(-) diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 794b628a23..0af8a15b88 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -106,9 +106,10 @@ // Medium screens - ensure proper spacing and alignment, extend to right edge @media (min-width: 768px) and (max-width: 1024px) { gap: 1rem; - align-items: flex-end; // Align sections to bottom + align-items: flex-end; // Align both sections at bottom margin-right: calc(-100vw + 100%); width: calc(100vw - 15px); // Account for left padding of wrapper + padding-bottom: 0; // Remove any padding here, handled by wrapper } @media (min-width: 990px) { @@ -200,29 +201,72 @@ @media (min-width: 768px) and (max-width: 1024px) { flex-shrink: 1; min-width: 0; - gap: 0.5rem; + gap: 1rem; // Increased spacing between logos padding-left: 10px; - align-items: flex-end; // Align logos to bottom of container + padding-right: 0 !important; // Ensure no right padding + align-items: flex-end; // Align all logos to bottom padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; - align-self: flex-end; // Align this container to bottom of parent - min-height: fit-content; // Allow container to grow to fit content + margin-right: 0; // Ensure no right margin + align-self: flex-end; // Align container to bottom to match left content // Target ExternalLink wrappers > a { display: flex; align-items: flex-end; // Align each logo to bottom - margin: 0; + margin: 0 !important; // Override Bootstrap mb-3 mb-md-0 padding: 0; + line-height: 0; // Remove line-height spacing - // Second ExternalLink (DFE logo) - allow full height + // First ExternalLink (NCCE logo) - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + + img { + max-width: 65px !important; + height: auto; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; // Force bottom alignment + } + } + + // Second ExternalLink (DFE logo) - reduce size to prevent clipping &:nth-of-type(2) { + align-items: flex-end; + align-self: flex-end; // Force bottom alignment img { - max-width: 90px !important; - max-height: none !important; // Remove height constraint + max-width: 70px !important; // Reduced to prevent clipping + max-height: 85px !important; // Add max-height to prevent clipping height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; // Force bottom alignment + } + } + + // Third logo (STEM) - keep at right edge, align to bottom + &:last-of-type { + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + margin-left: 0; + margin-right: 0; // Ensure no right margin + + img { + vertical-align: bottom; + margin-right: 0 !important; // Ensure no right margin + padding-right: 0 !important; // Ensure no right padding } } } @@ -232,13 +276,14 @@ height: auto; object-fit: contain; display: block; - margin: 0; - vertical-align: bottom; // Ensure bottom alignment + margin: 0 !important; + vertical-align: bottom; + line-height: 0; } // STEM logo specific sizing for medium screens .logo-mr { - max-height: none; // Remove height constraint + max-height: none; height: auto; width: auto; } @@ -332,7 +377,6 @@ } } -// Responsive adjustments for tablet (769px - 989px) @media only screen and (min-width: 769px) and (max-width: 989px) { .footer-bottom-links { h2 { @@ -357,26 +401,62 @@ .footer-bottom-logos { padding-top: 0; padding-bottom: 0; - gap: 0.5rem; - align-items: flex-end; // Align logos to bottom + padding-right: 0 !important; + gap: 1rem; // Increased spacing between logos + align-items: flex-end; // Align to bottom margin-top: 0; margin-bottom: 0; + margin-right: 0; align-self: flex-end; // Align container to bottom - min-height: fit-content; - // Target ExternalLink wrappers > a { display: flex; - align-items: flex-end; // Align each logo to bottom - margin: 0; + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + margin: 0 !important; // Override Bootstrap classes padding: 0; + line-height: 0; + + // First logo - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + + img { + max-width: 60px !important; + height: auto; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; + } + } - // Second ExternalLink (DFE logo) + // Second logo - prevent clipping &:nth-of-type(2) { img { - max-width: 85px !important; - max-height: none !important; // Remove height constraint + max-width: 65px !important; + max-height: 80px !important; // Prevent clipping height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; + } + } + + // Third logo - keep at right edge + &:last-of-type { + margin-right: 0; + + img { + vertical-align: bottom; + margin-right: 0 !important; + padding-right: 0 !important; } } } @@ -387,30 +467,31 @@ height: auto; object-fit: contain; display: block; - margin: 0; + margin: 0 !important; vertical-align: bottom; + line-height: 0; } .logo-mr { - max-height: none; // Remove height constraint + max-height: none; height: auto; width: auto; } } } -// Responsive adjustments for medium tablets (990px - 1024px) @media only screen and (min-width: 990px) and (max-width: 1024px) { .footer-bottom-wrapper { padding-left: 0; padding-right: 0; margin-left: 70px; + padding-bottom: 1.5rem; // Add bottom padding for iPad Pro } .footer-bottom-list { margin-right: calc(-100vw + 100% + 70px); width: calc(100vw - 70px); - align-items: flex-end; // Align sections to bottom + align-items: flex-end; // Align to bottom } .footer-bottom-left { @@ -437,28 +518,64 @@ } .footer-bottom-logos { - gap: 0.5rem; - align-items: flex-end; // Align logos to bottom + gap: 1.5rem; // Increased spacing between logos + align-items: flex-end; // Align to bottom padding-top: 0; padding-bottom: 0; + padding-right: 0 !important; margin-top: 0; margin-bottom: 0; + margin-right: 0; align-self: flex-end; // Align container to bottom - min-height: fit-content; - // Target ExternalLink wrappers > a { display: flex; - align-items: flex-end; // Align each logo to bottom - margin: 0; + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + margin: 0 !important; // Override Bootstrap classes padding: 0; + line-height: 0; + + // First logo - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + + img { + max-width: 70px !important; + height: auto; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; + } + } - // Second ExternalLink (DFE logo) + // Second logo - prevent clipping &:nth-of-type(2) { img { - max-width: 100px !important; - max-height: none !important; // Remove height constraint + max-width: 75px !important; + max-height: 90px !important; // Prevent clipping height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; + } + } + + // Third logo - keep at right edge + &:last-of-type { + margin-right: 0; + + img { + vertical-align: bottom; + margin-right: 0 !important; + padding-right: 0 !important; } } } @@ -469,19 +586,19 @@ padding-left: 8px; object-fit: contain; display: block; - margin: 0; + margin: 0 !important; vertical-align: bottom; + line-height: 0; } .logo-mr { - max-height: none; // Remove height constraint + max-height: none; height: auto; width: auto; } } } -// Responsive adjustments for mobile/tablet (480px - 768px) @media only screen and (min-width: 480px) and (max-width: 768px) { .footer-bottom-links { h2 { @@ -506,7 +623,6 @@ } } -// Responsive adjustments for small mobile (max-width: 480px) @media only screen and (max-width: 480px) { .footer-bottom-wrapper { padding-left: 15px; From 852b43a30a0f117ab11a532c56e1579a843454c2 Mon Sep 17 00:00:00 2001 From: Madhura Date: Wed, 3 Dec 2025 12:35:56 +0000 Subject: [PATCH 09/15] Fix the logos clipping issue --- src/scss/common/footer.scss | 103 ++++++++++++++++++++++++++---------- 1 file changed, 75 insertions(+), 28 deletions(-) diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 0af8a15b88..f6aa668337 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -86,12 +86,15 @@ // Remove right padding on medium screens to allow logos to touch edge @media (min-width: 768px) and (max-width: 1024px) { padding-right: 0; + padding-bottom: 1.5rem; // Add bottom padding like iPad Pro + overflow: visible; // Ensure logos aren't clipped } @media (min-width: 990px) { padding-left: 0; padding-right: 0; margin-left: 70px; + padding-bottom: 1.5rem; // Add bottom padding for iPad Pro } @media (min-width: 1700px) { @@ -110,6 +113,7 @@ margin-right: calc(-100vw + 100%); width: calc(100vw - 15px); // Account for left padding of wrapper padding-bottom: 0; // Remove any padding here, handled by wrapper + overflow: visible; // Ensure content isn't clipped } @media (min-width: 990px) { @@ -192,6 +196,7 @@ gap: 0.875rem; padding-right: 0 !important; flex-shrink: 0; + overflow: visible; // Prevent clipping @media (min-width: 768px) { justify-content: flex-end; @@ -201,7 +206,7 @@ @media (min-width: 768px) and (max-width: 1024px) { flex-shrink: 1; min-width: 0; - gap: 1rem; // Increased spacing between logos + gap: 1.5rem; // Match iPad Pro spacing padding-left: 10px; padding-right: 0 !important; // Ensure no right padding align-items: flex-end; // Align all logos to bottom @@ -211,6 +216,8 @@ margin-bottom: 0; margin-right: 0; // Ensure no right margin align-self: flex-end; // Align container to bottom to match left content + overflow: visible; // Prevent clipping + min-height: fit-content; // Allow container to grow // Target ExternalLink wrappers > a { @@ -219,6 +226,7 @@ margin: 0 !important; // Override Bootstrap mb-3 mb-md-0 padding: 0; line-height: 0; // Remove line-height spacing + overflow: visible; // Prevent clipping // First ExternalLink (NCCE logo) - ensure bottom alignment &:first-of-type { @@ -228,24 +236,26 @@ align-self: flex-end; // Force bottom alignment img { - max-width: 65px !important; - height: auto; + max-width: 70px !important; // Same size as iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint to prevent clipping display: block; margin: 0 !important; padding: 0 !important; vertical-align: bottom; line-height: 0; align-self: flex-end; // Force bottom alignment + object-fit: contain; } } - // Second ExternalLink (DFE logo) - reduce size to prevent clipping + // Second ExternalLink (DFE logo) - same size as first &:nth-of-type(2) { align-items: flex-end; align-self: flex-end; // Force bottom alignment img { - max-width: 70px !important; // Reduced to prevent clipping - max-height: 85px !important; // Add max-height to prevent clipping + max-width: 70px !important; // Same size as first logo + max-height: none !important; // Remove height constraint to prevent clipping height: auto !important; display: block; margin: 0 !important; @@ -256,7 +266,7 @@ } } - // Third logo (STEM) - keep at right edge, align to bottom + // Third logo (STEM) - same size as others &:last-of-type { align-items: flex-end; align-self: flex-end; // Force bottom alignment @@ -264,16 +274,22 @@ margin-right: 0; // Ensure no right margin img { + max-width: 70px !important; // Same size as other logos + height: auto !important; + max-height: none !important; // Remove height constraint vertical-align: bottom; margin-right: 0 !important; // Ensure no right margin padding-right: 0 !important; // Ensure no right padding + object-fit: contain; + display: block; } } } img { - max-width: 80px; - height: auto; + max-width: 70px !important; // Default consistent size for all logos - match iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint object-fit: contain; display: block; margin: 0 !important; @@ -283,8 +299,9 @@ // STEM logo specific sizing for medium screens .logo-mr { - max-height: none; - height: auto; + max-width: 70px !important; // Same size as others - match iPad Pro + max-height: none !important; // Remove height constraint + height: auto !important; width: auto; } } @@ -378,6 +395,11 @@ } @media only screen and (min-width: 769px) and (max-width: 989px) { + .footer-bottom-list { + align-items: flex-end; // Align both sections at bottom - same as iPad Pro + overflow: visible; // Prevent clipping + } + .footer-bottom-links { h2 { font-size: 18px; @@ -402,12 +424,14 @@ padding-top: 0; padding-bottom: 0; padding-right: 0 !important; - gap: 1rem; // Increased spacing between logos + gap: 1.5rem; // Match iPad Pro spacing align-items: flex-end; // Align to bottom margin-top: 0; margin-bottom: 0; margin-right: 0; align-self: flex-end; // Align container to bottom + overflow: visible; // Prevent clipping + min-height: fit-content; // Allow container to grow > a { display: flex; @@ -416,6 +440,7 @@ margin: 0 !important; // Override Bootstrap classes padding: 0; line-height: 0; + overflow: visible; // Prevent clipping // First logo - ensure bottom alignment &:first-of-type { @@ -423,22 +448,26 @@ margin-top: 0 !important; img { - max-width: 60px !important; - height: auto; + max-width: 70px !important; // Same size as iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint display: block; margin: 0 !important; padding: 0 !important; vertical-align: bottom; line-height: 0; align-self: flex-end; + object-fit: contain; } } - // Second logo - prevent clipping + // Second logo - same size as first &:nth-of-type(2) { + align-items: flex-end; + align-self: flex-end; img { - max-width: 65px !important; - max-height: 80px !important; // Prevent clipping + max-width: 70px !important; // Same size as first logo + max-height: none !important; // Remove height constraint to prevent clipping height: auto !important; display: block; margin: 0 !important; @@ -449,22 +478,30 @@ } } - // Third logo - keep at right edge + // Third logo - same size as others &:last-of-type { + align-items: flex-end; + align-self: flex-end; margin-right: 0; img { + max-width: 70px !important; // Same size as other logos + height: auto !important; + max-height: none !important; // Remove height constraint vertical-align: bottom; margin-right: 0 !important; padding-right: 0 !important; + object-fit: contain; + display: block; } } } img { padding-left: 8px; - max-width: 75px; - height: auto; + max-width: 70px !important; // Default consistent size - match iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint object-fit: contain; display: block; margin: 0 !important; @@ -473,9 +510,9 @@ } .logo-mr { - max-height: none; - height: auto; - width: auto; + max-width: 70px !important; // Same size as others - match iPad Pro + max-height: none !important; // Remove height constraint + height: auto !important; } } } @@ -542,7 +579,7 @@ margin-top: 0 !important; img { - max-width: 70px !important; + max-width: 70px !important; // Consistent size height: auto; display: block; margin: 0 !important; @@ -550,13 +587,16 @@ vertical-align: bottom; line-height: 0; align-self: flex-end; + object-fit: contain; } } - // Second logo - prevent clipping + // Second logo - same size as first &:nth-of-type(2) { + align-items: flex-end; + align-self: flex-end; img { - max-width: 75px !important; + max-width: 70px !important; // Same size as first logo max-height: 90px !important; // Prevent clipping height: auto !important; display: block; @@ -568,20 +608,26 @@ } } - // Third logo - keep at right edge + // Third logo - same size as others &:last-of-type { + align-items: flex-end; + align-self: flex-end; margin-right: 0; img { + max-width: 70px !important; // Same size as other logos + height: auto; vertical-align: bottom; margin-right: 0 !important; padding-right: 0 !important; + object-fit: contain; + display: block; } } } img { - max-width: 90px; + max-width: 70px !important; // Default consistent size height: auto; padding-left: 8px; object-fit: contain; @@ -592,6 +638,7 @@ } .logo-mr { + max-width: 70px !important; // Same size as others max-height: none; height: auto; width: auto; From f6a66002dac8ebb1aaf9e1a4f3f5325486c2f7b3 Mon Sep 17 00:00:00 2001 From: Madhura Date: Wed, 3 Dec 2025 16:38:40 +0000 Subject: [PATCH 10/15] Adjust position of logos and content from left --- .../list-groups/ListGroupFooterBottom.tsx | 7 ++-- src/scss/common/footer.scss | 39 ++++++++++++------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 988e318b81..66eb5dbb20 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -37,22 +37,21 @@ const footerLinks = { export const ListGroupFooterBottom = () => (
-
+

Links

{footerLinks.right} -

- All teaching materials on this site are available under the{" "} +

+ All teaching materials on this site are available under the
Open Government Licence v3.0, -
except where otherwise stated.

diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index f6aa668337..541bbe0a00 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -93,12 +93,12 @@ @media (min-width: 990px) { padding-left: 0; padding-right: 0; - margin-left: 70px; + margin-left: 85px; padding-bottom: 1.5rem; // Add bottom padding for iPad Pro } @media (min-width: 1700px) { - margin-left: 270px; + margin-left: 300px; } } @@ -106,6 +106,9 @@ margin: 0; width: 100%; + @media (min-width: 1024px){ + width: 100%; + } // Medium screens - ensure proper spacing and alignment, extend to right edge @media (min-width: 768px) and (max-width: 1024px) { gap: 1rem; @@ -117,19 +120,22 @@ } @media (min-width: 990px) { - margin-right: calc(-100vw + 100% + 70px); - width: calc(100vw - 70px); + // Extend to right edge: negative margin accounts for the 85px left margin + margin-right: calc(-100vw + 100% + 85px); + width: calc(100vw - 85px); // Width accounts for the 85px left margin + padding-left: 0; // Remove padding-left since we're using margin calculations } @media (min-width: 1700px) { - margin-right: calc(-100vw + 100% + 270px); - width: calc(100vw - 270px); + // Extend to right edge: negative margin accounts for the 300px left margin + margin-right: calc(-100vw + 100% + 300px); + width: calc(100vw - 300px); // Width accounts for the 300px left margin } } .footer-bottom-left { padding-left: 0; - padding-right: 15px; + // padding-right: 15px; @media (min-width: 768px) and (max-width: 1024px) { flex-shrink: 1; @@ -397,7 +403,8 @@ @media only screen and (min-width: 769px) and (max-width: 989px) { .footer-bottom-list { align-items: flex-end; // Align both sections at bottom - same as iPad Pro - overflow: visible; // Prevent clipping + overflow: visible; + margin-right: 0 !important; // Prevent clipping } .footer-bottom-links { @@ -414,7 +421,8 @@ .footer-bottom-info { p { - padding-bottom: 1.5rem !important; + padding-bottom: 0 !important; + margin-bottom: 0 !important; font-size: 12px; line-height: 1.4; } @@ -521,14 +529,16 @@ .footer-bottom-wrapper { padding-left: 0; padding-right: 0; - margin-left: 70px; + margin-left: 32px; // Keep this to align with footer content above padding-bottom: 1.5rem; // Add bottom padding for iPad Pro } .footer-bottom-list { - margin-right: calc(-100vw + 100% + 70px); - width: calc(100vw - 70px); + // Extend to right edge: negative margin accounts for the 32px left margin + margin-right: calc(-100vw + 100% + 32px); + width: calc(100vw - 32px); // Width accounts for the 32px left margin align-items: flex-end; // Align to bottom + padding-left: 0; // Remove padding-left since we're using margin calculations } .footer-bottom-left { @@ -555,7 +565,7 @@ } .footer-bottom-logos { - gap: 1.5rem; // Increased spacing between logos + gap: 1.5 rem; // Increased spacing between logos align-items: flex-end; // Align to bottom padding-top: 0; padding-bottom: 0; @@ -659,7 +669,7 @@ .footer-bottom-info { p { - padding-bottom: 1.5rem !important; + padding-bottom: 0 !important; } } @@ -674,6 +684,7 @@ .footer-bottom-wrapper { padding-left: 15px; padding-right: 15px; + // margin-left: 24px; } .footer-bottom-links { From a1cdafa5a9fbb962295521557f5f7f245b46e562 Mon Sep 17 00:00:00 2001 From: Madhura Date: Wed, 3 Dec 2025 21:27:17 +0000 Subject: [PATCH 11/15] Arrange the logos position to the end of flex --- .../components/elements/list-groups/ListGroupFooterBottom.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 66eb5dbb20..1d9d23863d 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -57,7 +57,7 @@ export const ListGroupFooterBottom = () => (
- + Date: Wed, 3 Dec 2025 22:01:39 +0000 Subject: [PATCH 12/15] Fix styling --- .../elements/list-groups/ListGroupFooterBottom.tsx | 4 ++-- src/scss/common/footer.scss | 8 +++++++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 1d9d23863d..879f9f463c 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -36,7 +36,7 @@ const footerLinks = { export const ListGroupFooterBottom = () => (
- +

Links

@@ -57,7 +57,7 @@ export const ListGroupFooterBottom = () => (
- + Date: Thu, 4 Dec 2025 15:59:18 +0000 Subject: [PATCH 13/15] Restore the logo sizes --- .../list-groups/ListGroupFooterBottom.tsx | 2 +- src/scss/common/footer.scss | 57 ++++++++++++------- 2 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 879f9f463c..1ed730deec 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -50,7 +50,7 @@ export const ListGroupFooterBottom = () => ( href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" className="d-inline fw-bold print-font text-decoration-none" > - Open Government Licence v3.0, + Open Government Licence v3.0, {""} except where otherwise stated.

diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index f6f8ac91f7..131a08ffb1 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -90,12 +90,12 @@ overflow: visible; // Ensure logos aren't clipped } - @media (min-width: 990px) { - padding-left: 0; - padding-right: 0; - margin-left: 85px; - padding-bottom: 1.5rem; // Add bottom padding for iPad Pro - } + // @media (min-width: 900px) { + // padding-left: 0; + // padding-right: 0; + // margin-left: 85px; + // padding-bottom: 1.5rem; // Add bottom padding for iPad Pro + // } @media (min-width: 1700px) { margin-left: 300px; @@ -325,7 +325,9 @@ @media (min-width: 990px) { padding-left: 14px; - max-width: none; + max-width: none !important; + width: auto; + flex-shrink: 0; } } } @@ -408,9 +410,9 @@ @media only screen and (min-width: 769px) and (max-width: 989px) { .footer-bottom-list { - align-items: flex-end; // Align both sections at bottom - same as iPad Pro + align-items: flex-end; overflow: visible; - margin-right: 0 !important; // Prevent clipping + margin-right: 0 !important; } .footer-bottom-links { @@ -531,7 +533,7 @@ } } -@media only screen and (min-width: 990px) and (max-width: 1024px) { +@media only screen and (min-width: 990px) { .footer-bottom-wrapper { padding-left: 0; padding-right: 0; @@ -571,15 +573,16 @@ } .footer-bottom-logos { - gap: 1.5 rem; // Increased spacing between logos - align-items: flex-end; // Align to bottom + gap: 1.5rem; // Fix typo: remove space in "1.5 rem" + align-items: flex-end; padding-top: 0; padding-bottom: 0; padding-right: 0 !important; margin-top: 0; margin-bottom: 0; margin-right: 0; - align-self: flex-end; // Align container to bottom + align-self: flex-end; + flex-shrink: 0 !important; // Prevent container from shrinking > a { display: flex; @@ -588,6 +591,7 @@ margin: 0 !important; // Override Bootstrap classes padding: 0; line-height: 0; + flex-shrink: 0; // First logo - ensure bottom alignment &:first-of-type { @@ -595,7 +599,8 @@ margin-top: 0 !important; img { - max-width: 70px !important; // Consistent size + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width height: auto; display: block; margin: 0 !important; @@ -604,16 +609,18 @@ line-height: 0; align-self: flex-end; object-fit: contain; + flex-shrink: 0; // Prevent image from shrinking } } - // Second logo - same size as first + // Second logo &:nth-of-type(2) { align-items: flex-end; align-self: flex-end; img { - max-width: 70px !important; // Same size as first logo - max-height: 90px !important; // Prevent clipping + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width + max-height: none !important; // Remove height constraint height: auto !important; display: block; margin: 0 !important; @@ -621,40 +628,46 @@ vertical-align: bottom; object-fit: contain; align-self: flex-end; + flex-shrink: 0; } } - // Third logo - same size as others + // Third logo &:last-of-type { align-items: flex-end; align-self: flex-end; margin-right: 0; img { - max-width: 70px !important; // Same size as other logos + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width height: auto; vertical-align: bottom; margin-right: 0 !important; padding-right: 0 !important; object-fit: contain; display: block; + flex-shrink: 0; } } } img { - max-width: 70px !important; // Default consistent size + max-width: none !important; // Remove 70px constraint for all images + width: auto !important; // Allow natural width height: auto; - padding-left: 8px; + padding-left: 14px; // Keep spacing object-fit: contain; display: block; margin: 0 !important; vertical-align: bottom; line-height: 0; + flex-shrink: 0; // Prevent shrinking } + .logo-mr { - max-width: 70px !important; // Same size as others + max-width: none !important; // Remove 70px constraint max-height: none; height: auto; width: auto; From 71a08ea55416ef8d735d9577e36a0161746e9694 Mon Sep 17 00:00:00 2001 From: Madhura Date: Mon, 8 Dec 2025 14:00:07 +0000 Subject: [PATCH 14/15] Fix positioning --- .../list-groups/ListGroupFooterBottom.tsx | 70 +++++++++---------- src/app/components/navigation/Footer.tsx | 2 +- src/scss/common/footer.scss | 2 +- 3 files changed, 35 insertions(+), 39 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 1ed730deec..0fb9b5a7c5 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,43 +35,39 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( -
- -
- -

Links

- {footerLinks.right} - - - -

- All teaching materials on this site are available under the
- - Open Government Licence v3.0, {""} - - except where otherwise stated. -

- -
+ <> + {/* */} +
+ +

Links

+ {footerLinks.right} + - - - National Centre for Computing Education website - - - UK Department for Education - - - STEM Learning - + +

+ All teaching materials on this site are available under the
+ + Open Government Licence v3.0, {""} + + except where otherwise stated. +

- -
+
+ + + + National Centre for Computing Education website + + + UK Department for Education + + + STEM Learning + + + {/* */} + ); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index dcf577d538..163fee858f 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -35,7 +35,7 @@ export const Footer = () => (
-
+
diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 131a08ffb1..473fee3c7a 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -8,7 +8,7 @@ .footerBottom { background-color: white; width: 100%; - overflow-x: hidden; // Prevent horizontal scroll + overflow-x: hidden; } .footer-links { From b624e9a19b3587ff27bd641ee48e601cfbd4d834 Mon Sep 17 00:00:00 2001 From: Madhura Date: Mon, 8 Dec 2025 16:27:11 +0000 Subject: [PATCH 15/15] Fix small screen logo positions --- .../list-groups/ListGroupFooterBottom.tsx | 26 +- src/app/components/navigation/Footer.tsx | 2 +- src/scss/common/footer.scss | 469 +++++++++++------- 3 files changed, 314 insertions(+), 183 deletions(-) diff --git a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx index 0fb9b5a7c5..3e571b0567 100644 --- a/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx +++ b/src/app/components/elements/list-groups/ListGroupFooterBottom.tsx @@ -35,9 +35,9 @@ const footerLinks = { }; export const ListGroupFooterBottom = () => ( - <> +
{/* */} -
+

Links

{footerLinks.right} @@ -57,17 +57,23 @@ export const ListGroupFooterBottom = () => (
- - - National Centre for Computing Education website - - - UK Department for Education - + +
+ + National Centre for Computing Education website + + + UK Department for Education + +
STEM Learning {/* */} - +
); diff --git a/src/app/components/navigation/Footer.tsx b/src/app/components/navigation/Footer.tsx index 163fee858f..3b35a87164 100644 --- a/src/app/components/navigation/Footer.tsx +++ b/src/app/components/navigation/Footer.tsx @@ -35,7 +35,7 @@ export const Footer = () => (
-
+
diff --git a/src/scss/common/footer.scss b/src/scss/common/footer.scss index 473fee3c7a..92b99dcf8a 100644 --- a/src/scss/common/footer.scss +++ b/src/scss/common/footer.scss @@ -204,21 +204,71 @@ .footer-bottom-logos { display: flex; flex-direction: row; - // align-items: center; + align-items: flex-end; // Align all items to bottom for proper vertical alignment gap: 0.875rem; padding-right: 0 !important; + padding-left: 0 !important; // Ensure no left padding on small screens flex-shrink: 0; overflow: visible; // Prevent clipping + justify-content: space-between; // On small screens: first two logos on left, third on right @media (min-width: 768px) { - justify-content: flex-end; + justify-content: flex-end; // On larger screens: all logos on right + gap: 1.5rem; // 1.5rem gap between all logos on medium+ screens + } + + // Wrapper for first two logos - stack vertically on smaller screens only + .footer-bottom-logos-first-two { + display: flex; + flex-direction: column; // Stack vertically on small screens + align-items: flex-start; // Align to left on small screens + justify-content: flex-end; // Align container content to bottom + gap: 0.875rem; + padding-left: 0; // Ensure no left padding + margin-left: 0; // Ensure no left margin + + // Ensure all child links align to the left on small screens + > a { + align-self: flex-start !important; // Force left alignment + margin-left: 0 !important; + padding-left: 0 !important; + + img { + margin-left: 0 !important; + padding-left: 0 !important; + display: block; // Ensure block display for proper alignment + } + } + + @media (min-width: 768px) { + flex-direction: row; // Arrange horizontally on medium+ screens + align-items: flex-end; // Align to bottom on larger screens + justify-content: flex-start; // Reset justify-content for row layout + gap: 1.5rem; // 1.5rem gap between first two logos on medium+ screens + margin-right: 0; // Remove any margin between wrapper and third logo + + > a { + align-self: auto; // Reset on larger screens + } + } + } + + // Third logo (STEM) - ensure it aligns with bottom of first two logos + > a:last-of-type { + align-self: flex-end; // Align to bottom to match first two logos container + display: flex; + align-items: flex-end; + + @media (min-width: 768px) { + margin-left: 0; // No extra margin on medium+ screens, gap handles spacing + } } // Medium screens (768px - 1024px) - allow shrinking and reduce gap @media (min-width: 768px) and (max-width: 1024px) { flex-shrink: 1; min-width: 0; - gap: 1.5rem; // Match iPad Pro spacing + gap: 1.5rem; // 1.5rem gap between all logos padding-left: 10px; padding-right: 0 !important; // Ensure no right padding align-items: flex-end; // Align all logos to bottom @@ -231,70 +281,79 @@ overflow: visible; // Prevent clipping min-height: fit-content; // Allow container to grow - // Target ExternalLink wrappers - > a { - display: flex; - align-items: flex-end; // Align each logo to bottom - margin: 0 !important; // Override Bootstrap mb-3 mb-md-0 - padding: 0; - line-height: 0; // Remove line-height spacing - overflow: visible; // Prevent clipping + // Target first two logos inside wrapper + .footer-bottom-logos-first-two { + gap: 1.5rem; // 1.5rem gap between first two logos - // First ExternalLink (NCCE logo) - ensure bottom alignment - &:first-of-type { - margin-bottom: 0 !important; - margin-top: 0 !important; - align-items: flex-end; - align-self: flex-end; // Force bottom alignment + > a { + display: flex; + align-items: flex-end; // Align each logo to bottom + margin: 0 !important; // Override Bootstrap mb-3 mb-md-0 + padding: 0; + line-height: 0; // Remove line-height spacing + overflow: visible; // Prevent clipping - img { - max-width: 70px !important; // Same size as iPad Pro - height: auto !important; - max-height: none !important; // Remove height constraint to prevent clipping - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - line-height: 0; + // First ExternalLink (NCCE logo) - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + align-items: flex-end; align-self: flex-end; // Force bottom alignment - object-fit: contain; + + img { + max-width: 70px !important; // Same size as iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint to prevent clipping + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; // Force bottom alignment + object-fit: contain; + } } - } - - // Second ExternalLink (DFE logo) - same size as first - &:nth-of-type(2) { - align-items: flex-end; - align-self: flex-end; // Force bottom alignment - img { - max-width: 70px !important; // Same size as first logo - max-height: none !important; // Remove height constraint to prevent clipping - height: auto !important; - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - object-fit: contain; + + // Second ExternalLink (DFE logo) - same size as first + &:nth-of-type(2) { + align-items: flex-end; align-self: flex-end; // Force bottom alignment + img { + max-width: 70px !important; // Same size as first logo + max-height: none !important; // Remove height constraint to prevent clipping + height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; // Force bottom alignment + } } } + } + + // Target third logo (STEM) - direct child + > a:last-of-type { + display: flex; + align-items: flex-end; // Align each logo to bottom + margin: 0 !important; // Override Bootstrap mb-3 mb-md-0 + padding: 0; + line-height: 0; // Remove line-height spacing + overflow: visible; // Prevent clipping + align-self: flex-end; // Force bottom alignment + margin-left: 0; + margin-right: 0; // Ensure no right margin - // Third logo (STEM) - same size as others - &:last-of-type { - align-items: flex-end; - align-self: flex-end; // Force bottom alignment - margin-left: 0; - margin-right: 0; // Ensure no right margin - - img { - max-width: 70px !important; // Same size as other logos - height: auto !important; - max-height: none !important; // Remove height constraint - vertical-align: bottom; - margin-right: 0 !important; // Ensure no right margin - padding-right: 0 !important; // Ensure no right padding - object-fit: contain; - display: block; - } + img { + max-width: 70px !important; // Same size as other logos + height: auto !important; + max-height: none !important; // Remove height constraint + vertical-align: bottom; + margin-right: 0 !important; // Ensure no right margin + padding-right: 0 !important; // Ensure no right padding + object-fit: contain; + display: block; } } @@ -449,7 +508,59 @@ overflow: visible; // Prevent clipping min-height: fit-content; // Allow container to grow - > a { + // Target first two logos inside wrapper + .footer-bottom-logos-first-two { + gap: 1.5rem; // 1.5rem gap between first two logos + + > a { + display: flex; + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + margin: 0 !important; // Override Bootstrap classes + padding: 0; + line-height: 0; + overflow: visible; // Prevent clipping + + // First logo - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + + img { + max-width: 70px !important; // Same size as iPad Pro + height: auto !important; + max-height: none !important; // Remove height constraint + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; + object-fit: contain; + } + } + + // Second logo - same size as first + &:nth-of-type(2) { + align-items: flex-end; + align-self: flex-end; + img { + max-width: 70px !important; // Same size as first logo + max-height: none !important; // Remove height constraint to prevent clipping + height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; + } + } + } + } + + // Target third logo (STEM) - direct child + > a:last-of-type { display: flex; align-items: flex-end; align-self: flex-end; // Force bottom alignment @@ -457,59 +568,17 @@ padding: 0; line-height: 0; overflow: visible; // Prevent clipping + margin-right: 0; - // First logo - ensure bottom alignment - &:first-of-type { - margin-bottom: 0 !important; - margin-top: 0 !important; - - img { - max-width: 70px !important; // Same size as iPad Pro - height: auto !important; - max-height: none !important; // Remove height constraint - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - line-height: 0; - align-self: flex-end; - object-fit: contain; - } - } - - // Second logo - same size as first - &:nth-of-type(2) { - align-items: flex-end; - align-self: flex-end; - img { - max-width: 70px !important; // Same size as first logo - max-height: none !important; // Remove height constraint to prevent clipping - height: auto !important; - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - object-fit: contain; - align-self: flex-end; - } - } - - // Third logo - same size as others - &:last-of-type { - align-items: flex-end; - align-self: flex-end; - margin-right: 0; - - img { - max-width: 70px !important; // Same size as other logos - height: auto !important; - max-height: none !important; // Remove height constraint - vertical-align: bottom; - margin-right: 0 !important; - padding-right: 0 !important; - object-fit: contain; - display: block; - } + img { + max-width: 70px !important; // Same size as other logos + height: auto !important; + max-height: none !important; // Remove height constraint + vertical-align: bottom; + margin-right: 0 !important; + padding-right: 0 !important; + object-fit: contain; + display: block; } } @@ -584,7 +653,62 @@ align-self: flex-end; flex-shrink: 0 !important; // Prevent container from shrinking - > a { + // Target first two logos inside wrapper + .footer-bottom-logos-first-two { + gap: 1.5rem; // 1.5rem gap between first two logos + + > a { + display: flex; + align-items: flex-end; + align-self: flex-end; // Force bottom alignment + margin: 0 !important; // Override Bootstrap classes + padding: 0; + line-height: 0; + flex-shrink: 0; + + // First logo - ensure bottom alignment + &:first-of-type { + margin-bottom: 0 !important; + margin-top: 0 !important; + + img { + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width + height: auto; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + line-height: 0; + align-self: flex-end; + object-fit: contain; + flex-shrink: 0; // Prevent image from shrinking + } + } + + // Second logo + &:nth-of-type(2) { + align-items: flex-end; + align-self: flex-end; + img { + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width + max-height: none !important; // Remove height constraint + height: auto !important; + display: block; + margin: 0 !important; + padding: 0 !important; + vertical-align: bottom; + object-fit: contain; + align-self: flex-end; + flex-shrink: 0; + } + } + } + } + + // Target third logo (STEM) - direct child + > a:last-of-type { display: flex; align-items: flex-end; align-self: flex-end; // Force bottom alignment @@ -592,63 +716,18 @@ padding: 0; line-height: 0; flex-shrink: 0; + margin-right: 0; - // First logo - ensure bottom alignment - &:first-of-type { - margin-bottom: 0 !important; - margin-top: 0 !important; - - img { - max-width: none !important; // Remove 70px constraint - width: auto !important; // Allow natural width - height: auto; - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - line-height: 0; - align-self: flex-end; - object-fit: contain; - flex-shrink: 0; // Prevent image from shrinking - } - } - - // Second logo - &:nth-of-type(2) { - align-items: flex-end; - align-self: flex-end; - img { - max-width: none !important; // Remove 70px constraint - width: auto !important; // Allow natural width - max-height: none !important; // Remove height constraint - height: auto !important; - display: block; - margin: 0 !important; - padding: 0 !important; - vertical-align: bottom; - object-fit: contain; - align-self: flex-end; - flex-shrink: 0; - } - } - - // Third logo - &:last-of-type { - align-items: flex-end; - align-self: flex-end; - margin-right: 0; - - img { - max-width: none !important; // Remove 70px constraint - width: auto !important; // Allow natural width - height: auto; - vertical-align: bottom; - margin-right: 0 !important; - padding-right: 0 !important; - object-fit: contain; - display: block; - flex-shrink: 0; - } + img { + max-width: none !important; // Remove 70px constraint + width: auto !important; // Allow natural width + height: auto; + vertical-align: bottom; + margin-right: 0 !important; + padding-right: 0 !important; + object-fit: contain; + display: block; + flex-shrink: 0; } } @@ -695,7 +774,30 @@ .footer-bottom-logos { padding-bottom: 1.5rem; gap: 1.25rem; - justify-content: flex-start; + justify-content: space-between; // First two logos on left, third on right + align-items: flex-end; // Ensure vertical alignment + + // Ensure first two logos align to the left + .footer-bottom-logos-first-two { + align-items: flex-start !important; // Force left alignment + padding-left: 0 !important; + margin-left: 0 !important; + + > a { + align-self: flex-start !important; // Force left alignment for both logos + margin-left: 0 !important; + padding-left: 0 !important; + + &:first-of-type { + margin-bottom: 0 !important; // Remove Bootstrap mb-3 on small screens + } + + img { + margin-left: 0 !important; + padding-left: 0 !important; + } + } + } } } @@ -718,7 +820,30 @@ .footer-bottom-logos { gap: 1.25rem; - justify-content: flex-start; - flex-wrap: wrap; + justify-content: space-between; // First two logos on left, third on right + flex-wrap: nowrap; // Prevent wrapping to maintain layout + align-items: flex-end; // Ensure vertical alignment + + // Ensure first two logos align to the left + .footer-bottom-logos-first-two { + align-items: flex-start !important; // Force left alignment + padding-left: 0 !important; + margin-left: 0 !important; + + > a { + align-self: flex-start !important; // Force left alignment for both logos + margin-left: 0 !important; + padding-left: 0 !important; + + &:first-of-type { + margin-bottom: 0 !important; // Remove Bootstrap mb-3 on small screens + } + + img { + margin-left: 0 !important; + padding-left: 0 !important; + } + } + } } } \ No newline at end of file