fixed bug in footer.

public/src/components/FeaturedContent.js

@@ -16,14 +16,6 @@ export default function FeaturedContent( {content} ) {
           {content[1]}
         </div>
       </div>
-      <div className="row">
-        <div className="col">
-          {content[2]}
-        </div>
-        <div className="col">
-          {content[3]}
-        </div>
-      </div>
     </>
   );
 }

public/src/components/Footer.js

@@ -11,7 +11,7 @@ import { FaThreadsIn } from 'react-icons/fa';
 export default function Footer() {
   return (
     <footer className="footer">
-      <div className="container">
+      <div className="footer-container">
         <div className="row">
           <div className="col-md-6">
             <p>&copy; {new Date().getFullYear()} Josh Ashton</p>

public/src/styles.css

@@ -306,31 +306,6 @@ input[type="radio"]:hover + label {
     font-size: 2vw;
 }
 
-@media (max-width: 991px) {
-    h1 {
-        font-size: 12vw;
-    }
-
-    h2 {
-        font-size: 8vw;
-    }
-
-    h3, .navbar-brand {
-        font-size: 6vw;
-    }
-
-    h4 {
-      font-size: 4vw;
-    }
-
-    p, .nav-link, .nav-link > .nav-item {
-        font-size: 3vw;
-    }
-
-    .nav-link > .nav-item {
-        font-weight: bold;
-    }
-}
 
 /*Buttons*/
 .btn {
@@ -351,6 +326,12 @@ input[type="radio"]:hover + label {
     color: var(--main-offwhite-color);
 }
 
+.footer-container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 80% !important;
+}
+
 .social-links {
   list-style: none; /* Remove default list styling */
   display: flex; /* Display list items as flex items */
@@ -382,6 +363,14 @@ input[type="radio"]:hover + label {
   .project-grid > * {
     flex: 0 0 30%; /* Set a fixed width for each project */
   }
+
+  .footer-container .social-links {
+    width: 80% !important;
+    margin: 0;
+    padding-left: 0; /* Remove any left padding on mobile */
+    padding-right: 0; /* Remove any right padding on mobile */
+  }
+
 }
 
 @media (min-width: 768px) and (max-width: 991px) { /* Medium Screens (2 columns) */
@@ -392,6 +381,13 @@ input[type="radio"]:hover + label {
   .project-grid > * {
     flex: 0 0 40%; /* Set a fixed width for each project */
   }
+
+  .footer-container .social-links {
+    width: 80% !important;
+    margin: 0;
+    padding-left: 0; /* Remove any left padding on mobile */
+    padding-right: 0; /* Remove any right padding on mobile */
+  }
 }
 
 @media (max-width: 767px) { /* Small Screens (1 column) */
@@ -402,4 +398,41 @@ input[type="radio"]:hover + label {
   .project-grid > * {
     flex: 1 1 80%; /* Set full width for each project */
   }
+
+  .footer-container .social-links {
+    width: 80% !important;
+    margin: 0;
+    padding-left: 0; /* Remove any left padding on mobile */
+    padding-right: 0; /* Remove any right padding on mobile */
+  }
+
+  .social-links li a {
+      font-size: 2vw;
+  }
+}
+
+@media (max-width: 991px) {
+    h1 {
+        font-size: 12vw;
+    }
+
+    h2 {
+        font-size: 8vw;
+    }
+
+    h3, .navbar-brand {
+        font-size: 6vw;
+    }
+
+    h4 {
+      font-size: 4vw;
+    }
+
+    p, .nav-link, .nav-link > .nav-item {
+        font-size: 3vw;
+    }
+
+    .nav-link > .nav-item {
+        font-weight: bold;
+    }
 }