static footer styles responsive completed

mavv-coder · mavv-coder · commit d10ae45bf432 · 2020-11-18T11:20:17.000+01:00
diff --git a/front/src/common-app/components/footer/footer.styles.ts b/front/src/common-app/components/footer/footer.styles.ts
@@ -46,6 +46,7 @@ export const linkList = css`
   padding: 0;
   margin: 0;
   list-style: none;
+
   @media (max-width: 380px) {
     text-align: center;
     margin-top: 1.2rem;
diff --git a/front/static/styles.css b/front/static/styles.css
@@ -513,6 +513,18 @@ form textarea {
   background-color: var(--color-dark);
 }
 
+@media only screen and (max-width: 728px) {
+  .footer {
+    padding: 2rem 4rem 3rem 4rem;
+  }
+}
+
+@media only screen and (max-width: 380px) {
+  .footer {
+    height: 35rem;
+  }
+}
+
 .footer__top-container {
   padding: 0 2rem;
   display: flex;
@@ -521,6 +533,15 @@ form textarea {
   align-items: center;
 }
 
+@media only screen and (max-width: 380px) {
+  .footer__top-container {
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+    height: 22rem;
+  }
+}
+
 .footer__logo {
   height: 10rem;
   width: 11.2rem;
@@ -531,8 +552,16 @@ form textarea {
   margin: 0;
   list-style: none;
 }
+
+@media only screen and (max-width: 380px) {
+  .footer__list {
+    text-align: center;
+    margin-top: 2.4rem;
+  }
+}
+
 .footer__list__item {
-  margin-top: 1rem;
+  margin-top: 0.5rem;
 }
 
 .footer__list__item a {
@@ -554,10 +583,11 @@ form textarea {
   padding-top: 1rem;
 }
 
-.footer__copyright {
-  color: var(--color-grey-light);
-  font-weight: 300;
-  font-size: 1.4rem;
+@media only screen and (max-width: 380px) {
+  .footer__bottom-container {
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 .footer--logo-lemon-container:hover .footer--logo-lemon {
@@ -584,6 +614,9 @@ form textarea {
 .footer__icon-list-item {
   margin-right: 1.2rem;
 }
+.footer__icon-list-item:last-of-type {
+  margin-right: 0;
+}
 
 .footer__icon {
   height: 2.4rem;
@@ -608,8 +641,14 @@ form textarea {
   fill: var(--color-primary-main);
 }
 
+.footer__copyright {
+  color: var(--color-grey-light);
+  font-weight: 300;
+  font-size: 1.4rem;
+}
+
 @media only screen and (max-width: 578px) {
-  .footer {
-    padding: 2rem 2rem;
+  .footer__copyright {
+    margin-top: 0.4rem;
   }
 }
