Mobile Viewport Adjustments

Author: marcelbrode

src/app.vue

@@ -54,7 +54,7 @@ export default {
     },
 
     methods: {
-        onUpdateTitle() {     
+        onUpdateTitle() {
             document.title = `${this.translatedRoute} | ${this.$tc('general.title')}`;
         },
 
@@ -112,6 +112,7 @@ p:last-child {
         color: $color-accent;
         font-size: 32px;
         font-family: Dortmund, sans-serif;
+        white-space: pre-wrap;
     }
 
     .v-card-subtitle {

src/snippets/de-DE.json

@@ -19,7 +19,7 @@
             "about": "Über mich",
             "aboutTraining": "Ausbildung",
             "aboutPractice": "Berufserfahrung",
-            "services": "Tätigkeitsspektrum"
+            "services": "Tätigkeits­felder"
         },
         "subtitle": {
             "home": "Fachanwalt für: Miet- und WEG-Recht / Sozialrecht"

src/views/aboutRoute.vue

@@ -75,13 +75,8 @@ export default {
     flex-wrap: wrap;
     white-space: pre-wrap;
 
-    &-card {
-      max-width: 60%;
-      padding: $spacer-md $spacer-xl;
-
-      &-entry {
-        color: $color-accent;
-      }
+    &-card-entry {
+      color: $color-accent;
     }
     
     &-section {
@@ -99,10 +94,6 @@ export default {
   .v-list {
     background-color: transparent;
   }
-
-  .v-card-title, .v-card-subtitle {
-    white-space: pre-wrap;
-  }
 }
 
 @media only screen and (max-width: 1000px) {
@@ -114,6 +105,10 @@ export default {
       padding: 0;
       padding-bottom: $spacer-md;
     }
+
+    &__content-image-src {
+      margin-left: unset;
+    }
   }
 }
 </style>

src/views/homeRoute.vue

@@ -41,16 +41,12 @@ export default {
       max-width: 60%;
       padding: 12px 24px;
     }
-    
+
     &-image-src {
       width: 350px;
       margin-left: 36px;
     }
   }
-
-  .v-card-title, .v-card-subtitle {
-    white-space: pre-wrap;
-  }
 }
 
 @media only screen and (max-width: 1000px) {
@@ -62,6 +58,16 @@ export default {
       padding: 0;
       padding-bottom: $spacer-md;
     }
+
+    &__content {
+      &-card {
+        max-width: unset;
+      }
+
+      &-image-src {
+        margin-left: unset;
+      }
+    }
   }
 }
 </style>

src/views/servicesRoute.vue

@@ -128,7 +128,7 @@ export default {
     flex-wrap: wrap;
 
     &-card {
-      width: 60%;
+      max-width: 80%;
 
       &-title {
         padding: 8px 0 24px;
@@ -153,6 +153,18 @@ export default {
       }
     }
 
+    &-card-button {
+      flex: 40%;
+      margin: 4px 0;
+      text-transform: none;
+      color: $color-secondary;
+    }
+
+    &-card {
+      max-width: 60%;
+      padding: 12px 24px;
+    }
+
     &-image-src {
       width: 350px;
       margin-left: 36px;
@@ -162,8 +174,18 @@ export default {
 
 @media only screen and (max-width: 600px) {
   .services-route {
-    &__content-card-button {
-      flex: 100%;
+    &__content {
+      &-card-button {
+        flex: 100%;
+      }
+
+      &-card {
+        max-width: unset;
+      }
+
+      &-image-src {
+        margin-left: unset;
+      }
     }
   }
 }