Resize the content for seasoned messages and the settings wrapper to look better on mobile

src/components/Settings.vue

@@ -129,7 +129,11 @@ a {
   }
 }
 .settings {
-   padding: 35px;
+  padding: 3rem;
+
+  @include mobile-only {
+    padding: 1rem;
+  }
 
    &__header {
       margin: 0;

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;