Adjust some elements to be more mobile friendly

client/src/components/NewsTeaser.vue

@@ -4,8 +4,8 @@
       <a :href="url" target="_blank" class="teaser__title">{{title}}</a>
     </h4>
     <a :href="url" target="_blank" class="teaser__date">
-        {{date}}
-      </a>
+      {{date}}
+    </a>
   </div>
 </template>
 
@@ -18,10 +18,21 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .news-teaser {
     display: flex;
-    border-left: 1px solid $color-lightgrey;
+    border-bottom: 1px solid $color-lightgrey;
+    padding-bottom: $large-spacing;
+    text-align: center;
+
+    @include desktop {
+      border-bottom: 0;
+      border-left: 1px solid $color-lightgrey;
+      padding-bottom: 0;
+      text-align: left;
+    }
+
     padding-left: $medium-spacing;
     flex-direction: column;
   }

client/src/pages/portfolio.vue

@@ -54,9 +54,11 @@
 
     grid-row-gap: 30px;
     grid-auto-rows: 200px;
-    width: 640px;
+    max-width: 640px;
+    width: auto;
     justify-self: center;
     box-sizing: border-box;
+    padding: $large-spacing $medium-spacing;
 
     &__page {
       display: flex;

client/src/pages/project.vue

@@ -109,18 +109,17 @@
       background-color: $color-grey--lighter;
       display: flex;
       flex-direction: column;
-      width: 840px;
+      max-width: 840px;
       align-content: center;
       margin: 0 auto;
       @supports (display: grid) {
         display: grid;
         width: auto;
       }
-      grid-template-columns: 840px;
+      grid-template-columns: minmax(max-content, 840px);
       grid-row-gap: 30px;
       justify-content: center;
-      padding-top: 30px;
-      padding-bottom: 50px;
+      padding: $large-spacing $medium-spacing;
     }
   }
 </style>

client/src/pages/start.vue

@@ -185,8 +185,14 @@
     -ms-grid-columns: 1fr 1fr 1fr;
     @supports (display: grid) {
       display: grid;
+      grid-template-columns: 1fr;
     }
+
+    grid-row-gap: $large-spacing;
+
+    @include desktop {
     grid-template-columns: repeat(5, 1fr);
+    }
 
     /*
      * For IE10+
@@ -221,29 +227,21 @@
       padding-bottom: 24px;
       text-align: center;
       color: inherit;
+      margin-bottom: 0;
     }
 
     &__more {
       color: $color-white;
       font-family: $sans-serif-font-family;
-      border-left: 1px solid $color-lightgrey;
       line-height: $default-line-height;
       padding-left: $medium-spacing;
       font-weight: $font-weight-bold;
-    }
-
-    &__teasers {
-      @supports (display: grid) {
-        display: grid;
-      }
+      text-align: center;
 
       @include desktop {
-        grid-template-columns: 1fr 1fr 1fr;
+        text-align: left;
+        border-left: 1px solid $color-lightgrey;
       }
-
-      grid-row-gap: 15px;
-      grid-column-gap: 50px;
     }
   }
-
 </style>