From a9de3fe403cc39e58ff479e79757632d8b448a39 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 30 Sep 2020 17:50:50 +0200
Subject: [PATCH] Fix footer styling on mobile

Also fix padding on body and footer on mobile
---
 client/src/layouts/DefaultFooter.vue   | 34 +++++++++++++++++++++++---
 client/src/styles/_default-layout.scss | 14 +++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index eaea9cf4..555feb65 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -79,16 +79,33 @@
       max-width: $footer-width;
       padding: 2*$large-spacing 0;
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+
+      @include desktop {
+        flex-direction: row;
+        justify-content: space-between;
+      }
     }
 
     &__who-are-we {
-      width: 330px;
+      width: 100%;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        width: 330px;
+        margin-bottom: 0;
+      }
     }
 
     &__logo-hep {
-      width: 147px;
+      width: auto;
       height: 35px;
+      margin-bottom: $large-spacing;
+
+      @include desktop {
+        width: 147px;
+        margin-bottom: 0;
+      }
     }
 
     &__logo-ehb {
@@ -100,11 +117,22 @@
       width: 100%;
       max-width: $footer-width;
       padding: $large-spacing 0;
+      display: flex;
+      flex-direction: column;
+
+      @include desktop {
+        flex-direction: row;
+      }
     }
 
     &__link {
       @include aside-with-cheese;
       margin-right: $large-spacing;
+      margin-bottom: $small-spacing;
+
+      @include desktop {
+        margin-bottom: 0;
+      }
     }
   }
 
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index 3576be7c..414a208a 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -46,9 +46,23 @@
     grid-area: h;
   }
 
+  &__content {
+    padding: 0 $small-spacing;
+
+    @include desktop {
+      padding: 0;
+    }
+  }
+
 
   &__footer {
     grid-area: f;
     margin-top: 3*$large-spacing;
+
+    padding: 0 $small-spacing;
+
+    @include desktop {
+      padding: 0;
+    }
   }
 }