style: footer alignment in mobile view (#118)

* footer modified * Replaced gap with horizontal padding * Removed commented code --------- Co-authored-by: Anurag Gupta <[email protected]>
elixir-cloud-aai · Mar 26, 2024 · f46a875 · f46a875
1 parent dca20b7
commit f46a875
Showing 1 changed file with 5 additions and 3 deletions.
diff --git 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>