From b46e586c92f7f90f8677352269f08a53b64c5447 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Wed, 30 Oct 2019 23:45:48 +0100
Subject: [PATCH] Resize the content for seasoned messages and the settings
 wrapper to look better on mobile

---
 src/components/Settings.vue            |  6 +++++-
 src/components/ui/SeasonedMessages.vue | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 527f3a3..2dc5452 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -129,7 +129,11 @@ a {
   }
 }
 .settings {
-   padding: 35px;
+  padding: 3rem;
+
+  @include mobile-only {
+    padding: 1rem;
+  }
 
    &__header {
       margin: 0;
diff --git a/src/components/ui/SeasonedMessages.vue b/src/components/ui/SeasonedMessages.vue
index c5c95ed..c3ba659 100644
--- a/src/components/ui/SeasonedMessages.vue
+++ b/src/components/ui/SeasonedMessages.vue
@@ -55,6 +55,8 @@ export default {
 
 <style lang="scss" scoped>
 @import "./src/scss/variables";
+@import "./src/scss/media-queries";
+
 .fade-enter-active {
   transition: opacity .4s;
 }
@@ -95,6 +97,20 @@ export default {
     transition: color .5s ease;
   }
 
+  @include mobile-only {
+    > div {
+      margin: 6px 6px;
+      line-height: 1.3rem;
+    }
+    h2 {
+      font-size: 1.1rem;
+    }
+    span {
+      font-size: 0.9rem;
+    }
+
+  }
+
   .pinstripe {
     height: 100%;
     width: 0.5rem;