make footer content in one div

src/app/components/elements/list-groups/ListGroupFooterBottom.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ListGroup, ListGroupItem } from "reactstrap";
+import { ListGroup, ListGroupItem, Container } from "reactstrap";
 import { ExternalLink } from "../ExternalLink";
 import { Link } from "react-router-dom";
 interface FooterLinkProps {
@@ -35,37 +35,49 @@ const footerLinks = {
 };
 
 export const ListGroupFooterBottom = () => (
-  <div className="footer-links footer-bottom">
-    <ListGroup className="d-flex flex-wrap flex-row link-group">
-      <ListGroupItem className="footer-bottom-links d-md-flex flex-md-row bg-transparent link-group w-100">
-        <h2 className="h5 mb-3 mb-md-0 mr-md-4">Links</h2>
-        <ListGroup className="d-md-flex flex-md-row">{footerLinks.right}</ListGroup>
-      </ListGroupItem>
-      <ListGroupItem className="footer-bottom-info border-0 px-0 py-0 bg-transparent">
-        <p className="pl-3 pt-2 mb-lg-0 pb-2 pb-sm-0">
-          All teaching materials on this site are available under the{" "}
-          <ExternalLink
-            href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-            className="d-inline fw-bold print-font"
-          >
-            Open Government Licence v3.0
-          </ExternalLink>
-          , except where otherwise stated.
-        </p>
-      </ListGroupItem>
+  // <div className="footer-links">
+  <>
+    {/* <ListGroup className="d-flex flex-wrap flex-column flex-md-row link-group"> */}
+    <Container className="papya mb-md-3 ">
+      <div className="d-flex flex-xl-row flex-column">
+        <div className="footer-bottom-links-container d-flex flex-column justify-content-end">
+          <ListGroupItem className="footer-bottom-links d-md-flex flex-md-row bg-transparent link-group w-100 pl-0">
+            <h3 className="mb-2 mb-md-0">Links</h3>
+            <ListGroup className="d-md-flex flex-md-row">{footerLinks.right}</ListGroup>
+          </ListGroupItem>
+          <ListGroupItem className="footer-bottom-info border-0 px-0 py-0 bg-transparent">
+            <p className=" pr-3 mb-0 pb-2 pb-sm-0">
+              All teaching materials on this site are available under the{" "}
+              <ExternalLink
+                href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
+                className="d-inline fw-bold print-font"
+              >
+                Open Government Licence v3.0
+              </ExternalLink>
+              , except where otherwise stated.
+            </p>
+          </ListGroupItem>
+        </div>
 
-      <ListGroupItem className="footer-bottom-logos border-0 px-0 py-0 bg-transparent d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center d-print-none">
-        <ExternalLink href="https://computingeducation.org.uk/" className="mb-3 mb-md-0">
-          <img
-            src="/assets/logos/ncce.svg"
-            alt="National Centre for Computing Education website"
-            className="img-fluid"
-          />
-        </ExternalLink>
-        <ExternalLink href="https://www.gov.uk/government/organisations/department-for-education">
-          <img src="/assets/logos/dfe.svg" alt="UK Department for Education" className="img-fluid" />
-        </ExternalLink>
-      </ListGroupItem>
-    </ListGroup>
-  </div>
+        <ListGroupItem className="footer-bottom-logos border-0 px-0 py-0 bg-transparent d-flex flex-column justify-content-end align-items-end d-print-none">
+          <div className="logos-container d-flex w-100 align-items-end align-items-md-end justify-content-end ml-3">
+            <ExternalLink href="https://computingeducation.org.uk/">
+              <img
+                src="/assets/logos/ncce.svg"
+                alt="National Centre for Computing Education website"
+                className="img-fluid"
+              />
+            </ExternalLink>
+            <ExternalLink href="https://www.gov.uk/government/organisations/department-for-education">
+              <img src="/assets/logos/dfe.svg" alt="UK Department for Education" className="img-fluid" />
+            </ExternalLink>
+            <ExternalLink href="https://www.stem.org.uk/">
+              <img src="/assets/logos/stem_footer.svg" alt="STEM Learning" className="logo-mr" />
+            </ExternalLink>
+          </div>
+        </ListGroupItem>
+      </div>
+    </Container>
+    {/* </ListGroup> */}
+  </>
 );

src/app/components/navigation/Footer.tsx

@@ -4,7 +4,7 @@
 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 = () => (
   <footer>
@@ -35,17 +35,10 @@
         </Row>
       </Container>
     </div>
-    <div className="footerBottom">
-      <Container>
-        <Row className="pt-3 px-sm-0">
-          <ListGroupFooterBottom />
-        </Row>
-      </Container>
-      <div className="w-100 d-flex justify-content-end">
-        <ExternalLink href="https://www.stem.org.uk/">
-          <img src="/assets/logos/stem_footer.svg" alt="STEM Learning" className="logo-mr" height="100px" />
-        </ExternalLink>
-      </div>
+    {/* <Container className="mr-0 pr-0"> */}
+    <div>
+      <ListGroupFooterBottom />
     </div>
+    {/* </Container> */}
   </footer>
 );

src/scss/common/footer.scss

@@ -1,76 +1,52 @@
-// NOMENSA footer.scss
-// REPLACE ./assets WITH /assets
 .footerTop {
   background-color: #120540;
   color: white;
 }
 
-.footer-links {
-  color: white;
-
-  .footer-support-links {
-    .h5 {
-      font-family: $footer-links-font;
-    }
-
-    .link-list {
+.footer-container {
+  background-color: white;
+}
 
-      a {
-        font-family: $footer-text-font;
-        color: white;
-        text-decoration: none;
+.papya {
+  margin-right: 0;
+  padding-right: 0;
+}
 
-        &:hover {
-          color: white;
-        }
-      }
-    }
-  }
+@media only screen and (min-width: 1680px) {
+.papya {
 
-  .h5 {
-    font-family: $footer-links-font;
+  max-width: 82vw !important;
+  padding-left: 0 !important;
   }
+}
 
-  a {
-    color: white;
-    display: block;
-    text-decoration: none;
+@media only screen and (min-width: 991px) and (max-width: 1680px) {
+// .papya {
+//   max-width: 98vw !important;
+//   }
+}
 
-    &:hover {
-      color: white;
-    }
+@media only screen and (max-width: 990px) {
+.papya {
+  max-width: 99vw !important;
   }
+}
 
-  .footerLink {
-    font-family: $footer-text-font;
-    font-size: 16px;
-  }
+.list-group a{
+  color: white;
+  text-decoration: none;
+}
 
-  .logo-col {
-    @include respond-below(sm) {
-      padding: 1rem;
-    }
-    a {
-      color: white;
-      display: block;
-      text-decoration: none;
-
-      &:hover {
-        color: white;
-      }
-    }
-  }
-  &.footer-links-social {
-    background-position: left 82%;
-    background-repeat: no-repeat;
-    height: 100%;
+  .logos-container {
+    gap: 2rem;
+    margin-bottom: 1rem;
 
-
     @include respond-above(md) {
-      background-position: left 100% bottom 15%;
+      gap: 1rem;
+      justify-content: flex-end;
+    align-items: flex-end !important;
     }
   }
-}
 
 .logo-text {
   color: white;
@@ -108,35 +84,39 @@
   .footer-bottom-logos {
     @include respond-above(md) {
       width: 30%;
-      margin-left: 8%;
     }
   }
 }
 
-.footer-bottom-links a {
+.footer-bottom-links a, h3 {
   color: black;
   padding-right: 30px;
+  margin-bottom: 0;
 
   &:hover {
     color: black;
   }
 }
 
+h3 {
+  font-family: $footer-links-font;
+  font-size: 18px;
+  margin-bottom: 0;
+}
+
 .print-font {
   font-family: $footer-bold-font;
   color: black !important;
 }
 
 .footer-bottom-logos img {
   max-width: 100%;
-  height: auto;
 }
 
 @media only screen and (min-width: 990px) {
   .footer-bottom-logos img {
     height: auto;
     width: auto;
-    max-width: 90%;
     padding-left: 14px;
   }
 }
@@ -146,20 +126,13 @@
     padding-top: 0.5rem !important;
   }
 
-  .footer-bottom-info {
-    p {
-      padding-bottom: 1.5rem !important;
-    }
-  }
-
   .footer-bottom-logos {
     padding-bottom: 1.5rem;
   }
 
   .footer-bottom-logos img {
     height: auto;
     width: auto;
-    max-width: 90%;
     padding-left: 14px;
   }
 }
@@ -180,20 +153,21 @@
     margin-bottom: 10px;
   }
 
-  .footer-bottom-info {
-    p {
-      padding-bottom: 1.5rem !important;
-    }
-  }
+  // .footer-bottom-info {
+  //   p {
+  //     padding-bottom: 1.5rem !important;
+  //   }
+  // }
 
   .footer-bottom-logos {
     padding-bottom: 1.5rem;
-    margin-left: 5%;
+    // margin-left: 5%;
     gap: 1.25rem;
-  }
-
+  }  
 }
 
+
+
 @media only screen and (max-width: 480px) {
   .logo-col {
     padding: 20px !important;

src/scss/cs/isaac.scss

@@ -389,6 +389,45 @@
   }
 }
 
+
+@media only screen and (min-width: 1680px) {
+container {
+  margin-left: 18vw;
+
+  & .container{
+    margin-left: auto;
+  }
+}
+}
+
+@media only screen and (min-width: 990px) and (max-width: 1680px) {
+container {
+  // margin-left: 2vw;
+
+  & .container{
+    margin-left: 0 !important;
+  }
+}
+}
+
+// @media only screen and (max-width: 990px) {
+// container {
+//   margin-left: 1vw;
+
+//   & .container{
+//     margin-left: 0 !important;
+//   }
+// }
+// }
+
+
+// footer .footerBottom  
+// { > .container {
+//   margin-left: 10vw;
+//   // margin-right: 5vw;
+// }
+// }
+
 // ----------------------------------------------
 // Custom width styling
 // ----------------------------------------------