fixed contact page mobile view

components/contact/ContactInformation.vue

@@ -27,6 +27,8 @@ onMounted(() => (mail.value = atob(contacts.email)));
 </script>
 
 <style lang="scss" module>
+@import "@/assets/css/mixins";
+
 .grid {
   width: auto;
   display: grid;
@@ -34,5 +36,9 @@ onMounted(() => (mail.value = atob(contacts.email)));
   gap: 16px;
   align-items: flex-start;
   justify-content: flex-start;
+
+  @include phone {
+    justify-content: stretch;
+  }
 }
 </style>

components/contact/ContactRow.vue

@@ -28,6 +28,7 @@ const openWindow = () => window.open(props.href);
 .row {
   cursor: pointer;
   padding: 10px 20px 10px 14px;
+  text-align: left;
 }
 
 .grid {

pages/contacts.vue

@@ -12,8 +12,8 @@
         </div>
       </div>
 
-      <div :class="$style.image">
-        <img src="@/assets/svg/writing.svg" alt="" />
+      <div>
+        <img src="@/assets/svg/writing.svg" alt="" :class="$style.image" />
       </div>
     </div>
   </article>
@@ -42,6 +42,10 @@ definePageMeta({ layout: "landing" });
 
 .text {
   padding-bottom: 40px;
+
+  @include phone {
+    text-align: center;
+  }
 }
 
 .content {
@@ -72,6 +76,10 @@ definePageMeta({ layout: "landing" });
 
 .contacts {
   margin-top: 60px;
+
+  @include phone {
+    margin-top: 40px;
+  }
 }
 
 .title {
@@ -79,12 +87,10 @@ definePageMeta({ layout: "landing" });
 }
 
 .image {
-  @include phone {
-    display: none;
-  }
+  max-width: 100%;
 
-  img {
-    max-width: 100%;
+  @include phone {
+    max-height: 25vh;
   }
 }
 </style>