Fixes flex direction and more in mobile screens

asyncapi · Mar 12, 2024 · 271ce18 · 271ce18
1 parent 20e24cd
commit 271ce18
Showing 1 changed file with 16 additions and 16 deletions.
diff --git a/components/Footer/footer.js b/components/Footer/footer.js
@@ -20,22 +20,22 @@ function Footer() {
   ];
   return (
     <div className="container">
-          <div className="w-full flex justify-between items-center p-4">
-            <img src="/img/logo.png" className="w-[150px]" />
-      <div className="mt-2 text-[14px] text-gray underline">
-        <a
-        href="https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md"
-        target="_blank"
-        rel="noreferrer"
-        className="hover:text-sky-500 duration-200 ease-in-out"
-        >
-              Code of Conduct
-            </a>
-          </div>
-      <div>
-      </div>
+      <div className="w-full flex justify-between items-center p-4 sm:flex-col sm:gap-3">
+        <img src="/img/logo.png" className="w-[150px]" />
+        <div className="mt-2 text-[14px] text-gray-100 underline">
+          <a
+            href="https://github.com/asyncapi/.github/blob/master/CODE_OF_CONDUCT.md"
+            target="_blank"
+            rel="noreferrer"
+            className="hover:text-sky-500 duration-200 ease-in-out"
+          >
+            Code of Conduct
+          </a>
+        </div>
+        <div>
+        </div>
         <div className="flex items-center justify-between sm:flex-col sm:items-start">
-          <div className="flex flex-col justify-between items-start gap-2 w-[284px]">
+          <div className="flex flex-col justify-between items-start gap-2 w-[284px] sm:items-center">
             <div className="flex justify-between items-center gap-3">
               {socials.map((social, index) => {
                 return (
@@ -57,7 +57,7 @@ function Footer() {
             </div>
           </div>
         </div>
-    </div>
+      </div>
     </div>
   );
 }