Merge pull request #115 from acm-ucr/brenda-rg/mobileFooter

Add footer mobile responsiveness
acm-ucr · Feb 8, 2025 · 6f23e3c · 6f23e3c
2 parents eccc960 + ab78843
commit 6f23e3c
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,22 +1,25 @@
-"use client";
 import Link from "next/link";
 import Image from "next/image";
 import CsaLogo from "@/public/home/csalogo.svg";
 import { icons } from "@/data/footerData";
 
 const Footer = () => {
   return (
-    <div className="flex items-center border-t-8 border-csa-yellow-100 bg-csa-red-200">
+    <div className="flex flex-col items-center gap-4 border-t-8 border-csa-yellow-100 bg-csa-red-200 pb-4 md:flex-row md:gap-0 md:pb-0">
       <Link href="/">
-        <Image src={CsaLogo} alt="CSA_Logo" className="ml-5 w-[6vw]" />
+        <Image
+          src={CsaLogo}
+          alt="CSA_Logo"
+          className="mt-2 w-[20vw] md:ml-5 md:mt-0 md:w-[6vw]"
+        />
       </Link>
 
-      <div className="absolute right-0 mr-6 flex gap-4">
+      <div className="flex gap-4 md:absolute md:right-0 md:mr-6">
         {icons.map((icon, index) => (
           <Link
             href={icon.link}
             key={index}
-            className="text-5xl text-white hover:scale-110 hover:text-csa-yellow-300"
+            className="text-3xl text-white hover:scale-110 hover:text-csa-yellow-300 md:text-5xl"
             target="_blank"
           >
             {icon.image}