align footer columns on smaller screens #1

force11 · Nov 23, 2021 · 88218bb · 88218bb · vercel · Nov 23, 2021
1 parent 1f45fe2
commit 88218bb
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -15,8 +15,8 @@ export default function Footer() {
         Footer
       </h2>
       <div className="max-w-7xl mx-auto py-6 lg:py-8 flex flex-auto items-center justify-between font-sans">
-        <div className="mx-2 w-full grid grid-cols-2 md:grid-cols-4 gap-2 lg:gap-8 xl:mt-0">
-          <div className="mt-2 mx-auto md:mt-0">
+        <div className="w-full grid grid-cols-2 md:grid-cols-4 gap-2 lg:gap-8 xl:mt-0">
+          <div className="mx-4 md:mx-auto mt-2 md:mt-0">
             <h3 className="text-base font-semibold text-gray-400 tracking-wider uppercase">
               FORCE11
             </h3>
@@ -89,7 +89,7 @@ export default function Footer() {
               </li>
             </ul>
           </div>
-          <div className="mt-2 mx-auto md:mt-0">
+          <div className="mx-4 md:mx-auto mt-2 md:mt-0">
             <h3 className="text-base font-semibold text-gray-400 tracking-wider uppercase">
               Community
             </h3>
@@ -133,7 +133,7 @@ export default function Footer() {
               </li>
             </ul>
           </div>
-          <div className="mt-2 mx-auto md:mt-0">
+          <div className="mx-4 md:mx-auto mt-2 md:mt-0">
             <h3 className="text-base font-semibold text-gray-400 tracking-wider uppercase">
               Upstream
             </h3>
@@ -172,7 +172,7 @@ export default function Footer() {
               </li>
             </ul>
           </div>
-          <div className="mt-2 mx-auto md:mt-0">
+          <div className="mx-4 md:mx-auto mt-2 md:mt-0">
             <h3 className="text-base font-semibold text-gray-400 tracking-wider uppercase">
               Contact Us
             </h3>