From 9899659dd36efa3b9ef6b4017169891251b6917b Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 11 Nov 2022 18:23:52 +0600
Subject: [PATCH] fixed contact page mobile view

---
 components/contact/ContactInformation.vue |  6 ++++++
 components/contact/ContactRow.vue         |  1 +
 pages/contacts.vue                        | 20 +++++++++++++-------
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/contact/ContactInformation.vue b/components/contact/ContactInformation.vue
index 5408a63..23e27ec 100644
--- a/components/contact/ContactInformation.vue
+++ b/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>
diff --git a/components/contact/ContactRow.vue b/components/contact/ContactRow.vue
index 4206a51..0e9dcc2 100644
--- a/components/contact/ContactRow.vue
+++ b/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 {
diff --git a/pages/contacts.vue b/pages/contacts.vue
index 219f444..057b8d8 100644
--- a/pages/contacts.vue
+++ b/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>