From f46a87540aeae5853355344a1c1a7f00989d34f0 Mon Sep 17 00:00:00 2001
From: Pratiksha Sankhe <sankhepratiksha3@gmail.com>
Date: Wed, 27 Mar 2024 00:04:10 +0530
Subject: [PATCH] style: footer alignment in mobile view (#118)

* footer modified

* Replaced gap with horizontal padding

* Removed commented code

---------

Co-authored-by: Anurag Gupta <me@anuragxd.com>
---
 components/Footer.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/Footer.jsx b/components/Footer.jsx
index 71bd4ef..c009e99 100644
--- a/components/Footer.jsx
+++ b/components/Footer.jsx
@@ -72,10 +72,10 @@ function Footer() {
   ];
 
   const renderFooterLinks = () => (
-    <div className="px-0 md:px-10 flex flex-wrap text-base justify-between md:justify-end">
+    <div className="px-0 md:px-10 flex flex-wrap text-base justify-center md:justify-start 2xl:justify-end">
       {footers.map((footer) => (
         <div
-          className="space-y-1.5 md:space-y-3 py-3 md:py-0 mx-10 md:mx-50"
+          className="px-8 py-3 md:py-0 md:mx-4 2xl:mx-50 md:my-4"
           key={footer.title}
         >
           <div className="text-sm md:text-lg md:font-semibold">
@@ -181,7 +181,9 @@ function Footer() {
             </span>
           </a>
         </div>
-        <div className="mt-4 md:mt-0 flex-grow">{renderFooterLinks()}</div>
+        <div className="mt-4 md:mt-0 flex-grow text-center">
+          {renderFooterLinks()}
+        </div>
       </div>
       <div className="text-[0.5rem] text-gray-700 text-right -mt-5 absolute bottom-0 md:right-64 right-5">
         Icons by <a href="https://icons8.com/">icons8.com</a>