Merge pull request #424 from drmcodes/fix-footer-buttons-not-align

fix: footer buttons not aligned properly
kleros · Sep 4, 2024 · eae2c13 · eae2c13
2 parents 7dfa1c7 + a60f1b6
commit eae2c13
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 55 deletions.
diff --git a/src/assets/images/twitter.svg b/src/assets/images/twitter.svg
diff --git a/src/assets/images/x.svg b/src/assets/images/x.svg
diff --git a/src/components/footer/footer.css b/src/components/footer/footer.css
@@ -1,49 +1,105 @@
 .footer {
-  background: #4D00B4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #4d00b4;
   color: white;
   height: 60px;
   font-size: 14px;
-  padding: 18px 25px;
+  padding: 18px 50px;
   width: 100%;
-  margin-top: -60px; }
-  @media (max-width: 768px) {
-    .footer {
-      display: none; } }
-  .footer a {
-    color: white;
-    text-decoration: none; }
-  .footer-left {
-    display: inline-block;
-    text-align: left;
-    width: 33%; }
-  .footer-center {
-    display: inline-block;
+  margin-top: -60px;
+}
+
+@media (max-width: 768px) {
+  .footer {
+    display: block;
+  }
+}
+
+.footer a {
+  color: white;
+  text-decoration: none;
+}
+
+.footer-left {
+  display: flex;
+  text-align: center;
+  align-items: center;
+  justify-content: flex-start;
+  width: 33%;
+}
+
+.footer-center {
+  display: inline-block;
+  text-align: center;
+  width: 33%;
+}
+
+.footer-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 33%;
+}
+
+.footer-right-help {
+  width: 40%;
+  display: inline-block;
+}
+
+.footer-right-help-text {
+  display: inline-block;
+  padding-right: 10px;
+}
+
+.footer-right-help-icon {
+  width: 18px;
+  position: relative;
+}
+
+@media (max-width: 1130px) {
+  .footer-right-help {
+    width: 100%;
+  }
+}
+
+.footer-right-icons {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+@media (max-width: 1130px) {
+  .footer-right-icons {
+    display: flex;
+  }
+}
+
+@media (max-width: 858px) {
+  .footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     text-align: center;
-    width: 33%; }
+    flex-direction: column;
+    height: auto;
+  }
+
+  .footer-left,
+  .footer-center,
+  .footer-right {
+    justify-content: center;
+    width: 100%;
+    padding-bottom: 10px;
+  }
+
+  .footer-right-help {
+    padding-bottom: 10px;
+  }
+
   .footer-right {
-    display: inline-block;
-    width: 33%;
-    padding-left: 10%; }
-    .footer-right-help {
-      width: 40%;
-      display: inline-block; }
-      .footer-right-help-text {
-        display: inline-block;
-        padding-right: 10px; }
-      .footer-right-help-icon {
-        width: 18px;
-        position: relative;
-        top: 4px; }
-      @media (max-width: 1130px) {
-        .footer-right-help {
-          width: 100%; } }
-    .footer-right-icons {
-      display: inline-block;
-      width: 60%;
-      position: relative;
-      top: 3px; }
-      .footer-right-icons a {
-        padding-right: 10px; }
-      @media (max-width: 1130px) {
-        .footer-right-icons {
-          display: none; } }
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/components/footer/index.js b/src/components/footer/index.js
@@ -1,11 +1,11 @@
-import React from 'react'
-import { ReactComponent as Question } from '../../assets/images/question-circle.svg'
-import { ReactComponent as Twitter } from '../../assets/images/twitter.svg'
-import { ReactComponent as Github } from '../../assets/images/github.svg'
-import { ReactComponent as Ghost } from '../../assets/images/ghost.svg'
-import { ReactComponent as LinkedIn } from '../../assets/images/linkedin.svg'
-import { ReactComponent as Telegram } from '../../assets/images/telegram.svg'
-import './footer.css'
+import React from "react";
+import { ReactComponent as Question } from "../../assets/images/question-circle.svg";
+import { ReactComponent as Twitter } from "../../assets/images/x.svg";
+import { ReactComponent as Github } from "../../assets/images/github.svg";
+import { ReactComponent as Ghost } from "../../assets/images/ghost.svg";
+import { ReactComponent as LinkedIn } from "../../assets/images/linkedin.svg";
+import { ReactComponent as Telegram } from "../../assets/images/telegram.svg";
+import "./footer.css";
 
 const Footer = () => (
   <div className="footer">
@@ -39,6 +39,6 @@ const Footer = () => (
       </div>
     </div>
   </div>
-)
+);
 
-export default Footer
+export default Footer;