From bafbff274ffbe216401ed35f349c913ebd5208d1 Mon Sep 17 00:00:00 2001
From: Ram Reddy <ram.n.reddy15@gmail.com>
Date: Thu, 18 Feb 2021 11:46:49 -0800
Subject: [PATCH] Added phone and tablet support

---
 src/components/assets/StyledContactForm.js |  4 ++--
 src/components/assets/contact.scss         | 21 +++++++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index ec73291..f77e833 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -13,12 +13,12 @@ const StyledFormWrapper = styled.div`
   justify-content: center;
   align-items: center;
   position:relative;
-  margin-top: 5vw;
+  margin-top: 4vw;
   padding: 0 2%;
 `;
 
 const StyledForm = styled.form`
-  width: 50%;
+  width: 70%;
   padding: 1.75%;
   background-color: #eee;
   color: #3d5a80;
diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss
index 9e77093..0ecbbef 100644
--- a/src/components/assets/contact.scss
+++ b/src/components/assets/contact.scss
@@ -1,3 +1,6 @@
+$small: 500px;
+$medium: 800px;
+
 button {
     cursor:pointer;
 }
@@ -16,14 +19,28 @@ body {
   text-align: center;
   padding: 0 2%;
   position:relative;
-  top:3em;
+  top:2em;
+  @media only screen and (max-width: $medium) {
+    width: 30%;
+    left: 35%;
+  }
+  @media only screen and (max-width: $small) {
+    width: 65%;
+    left: 17%;
+  }
 }
 
   .fa {
     font-size: 100%;
     width: 10%;
     text-decoration: none;
-    margin: 0vw 0.8vw;
+    margin: 0vw 0.7vw;
+    @media only screen and (max-width: $medium) {
+      margin: 0vw 1.3vw;
+    }
+    @media only screen and (max-width: $small) {
+      margin: 0vw 2vw;
+    }
   }
   
   .fa:hover {