From 0a68406c1825eeaf727e92463a3032d28fc3a187 Mon Sep 17 00:00:00 2001
From: Justin Balaguer <justinanthony.primary@gmail.com>
Date: Thu, 10 Oct 2024 16:16:26 +0800
Subject: [PATCH] style: fix footer alignment on smaller screen

---
 src/components/Footer.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index b7ea7b1..1b75549 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -44,7 +44,7 @@ function FooterUi() {
       <div className="mx-auto max-w-screen-2xl overflow-hidden px-6 py-4 lg:px-8">
         <nav
           aria-label="Footer"
-          className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
+          className="-mb-6 flex flex-wrap justify-center gap-5"
         >
           {footerLinks.map((item) => (
             <div key={item.title} className="pb-6">
@@ -58,12 +58,12 @@ function FooterUi() {
             </div>
           ))}
         </nav>
-        <div className="mt-8 flex justify-center space-x-10">
+        <div className="mt-8 flex flex-wrap gap-5 justify-center">
           {socialMediaLinks.map((item, idx) => {
             const { Icon, Link: link } = item
             return (
               <Link
-                  key={link}
+                key={link}
                 href={link}
                 className="text-gray-400 hover:text-gray-500"
                 target="_blank"