fix mobile contact field and .two.portfolio margin-top = 0

dwnorm2 · Sep 18, 2023 · 41f9f82 · 41f9f82
1 parent 949fc01
commit 41f9f82
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/css/style.css b/css/style.css
@@ -75,7 +75,7 @@ body {
 .flex-container {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
 }
 
 header {
@@ -331,6 +331,9 @@ main img {
   .flex-container {
     height: 100dvh;
   }
+  .two.portfolio {
+    margin-top: 0;
+  }
   .staticWave {
     animation: animate 100s linear infinite;
     animation-fill-mode: forwards;
@@ -534,28 +537,55 @@ textarea {
   /* border: 1px solid red; */
 }
 /* add media query for mobile contact form */
+.message-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  /* postion: fixed; */
+}
 
 @media screen and (max-width: 690px) {
+  input,
+  label,
+  textarea,
+  .field-container {
+    width: 85vw;
+    text-align: center;
+    margin-bottom: 20px;
+  }
   input,
   textarea {
-    width: 200px;
+    margin-top: 10px;
+  }
+  label {
+    /* gap: 10px; */
+  }
+  .message-row {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .message-label {
+    /* width: 80vw; */
+    margin: 0;
+    padding: 0;
+  }
+  .contact-flex-container {
+    margin-top: 0px;
+  }
+  .contact-flex-container h3 {
+    margin-bottom: 20px;
+  }
+  .mb-6 {
   }
 }
 
 textarea {
-  margin-left: 5px;
 }
 
 /* label {
 } */
 
-.message-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  /* postion: fixed; */
-}
-
 button {
   background-color: #ffffff;
   border-radius: 8px;