final scaling done

Lopputyö/contact.css

@@ -100,4 +100,99 @@
 .contact .input-wrapper-submit img {
   width: 56px;
   height: 56px;
+}
+
+@media only screen and (max-width: 400px) {
+  .contact {
+    padding: 0 !important;
+  }
+  .contact h1 {
+    font-size: 11vw !important;
+    margin: 0;
+  }
+  .contact form {
+    width: 90% !important;
+    margin: 17vw 0 0 0;
+  }
+  .contact .input-wrapper {
+    display: grid;
+    margin: 0;
+  }
+  .contact .input-wrapper .input-group {
+    width: 100% !important;
+    margin-top: 5vw;
+  }
+  .contact .input-wrapper .input-group label {
+    font-size: calc(25px + 0.390625vw);
+  }
+  .contact .input-wrapper .input-group input,
+  .contact .input-wrapper .input-group textarea {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    border-bottom: 1px solid #414141;
+    resize: none;
+    font-size: calc(16px + 0.390625vw);
+  }
+  .contact .input-wrapper .input-group input:focus, .contact .input-wrapper .input-group textarea:focus {
+    outline: none;
+  }
+  .contact .input-wrapper-1 {
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+    width: 100%;
+    max-width: 960px;
+  }
+  .contact .input-wrapper-1 .input-group-1 {
+    width: 100%;
+    max-width: 960px;
+  }
+  .contact .input-wrapper-1 .input-group-1 label {
+    font-size: calc(25px + 0.390625vw);
+  }
+  .contact .input-wrapper-1 .input-group-1 input,
+  .contact .input-wrapper-1 .input-group-1 textarea {
+    width: 100%;
+    max-width: 960px;
+    padding: 5px;
+    border: none;
+    border-bottom: 1px solid #414141;
+    resize: none;
+    font-size: calc(16px + 0.390625vw);
+  }
+  .contact .input-wrapper-1 .input-group-1 input:focus, .contact .input-wrapper-1 .input-group-1 textarea:focus {
+    outline: none;
+  }
+  .contact .input-wrapper-submit button[type=submit] {
+    margin-top: 5%;
+    background-color: #e6b294;
+    color: #f8f8f8;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 12px;
+    font-size: calc(15px + 0.390625vw);
+    transition: ease-in-out 0.2s;
+  }
+  .contact .input-wrapper-submit button[type=submit]:hover {
+    transform: scale(1.05);
+    transition: ease-in-out 0.2s;
+    color: #414141;
+  }
+  .contact .input-wrapper-submit .ig, .contact .input-wrapper-submit .fb, .contact .input-wrapper-submit .gh {
+    margin-left: 10px;
+    width: 60px;
+    height: auto;
+    margin-top: 5%;
+    transition: ease-in-out 0.2s;
+    border-radius: 12px;
+  }
+  .contact .input-wrapper-submit .ig:hover, .contact .input-wrapper-submit .fb:hover, .contact .input-wrapper-submit .gh:hover {
+    transform: scale(1.05);
+    transition: ease-in-out 0.2s;
+  }
+  .contact .input-wrapper-submit img {
+    width: 45px;
+    height: 45px;
+  }
 }/*# sourceMappingURL=contact.css.map */
\ No newline at end of file

Lopputyö/contact.scss

@@ -103,3 +103,107 @@
 }
 
 // ------------------------------------------------RESPONSIVE SETTINGS
+@media only screen and (max-width: 960px) {
+        // none
+      }
+      
+      @media only screen and (max-width: 810px) {
+        // none
+      }
+      
+      @media only screen and (max-width: 400px) {
+        .contact{
+          //text-align: center; does not look good
+          padding: 0 !important;
+          h1{
+                font-size: 11vw !important;
+                margin: 0;
+            }
+            form{
+              width: 90% !important;
+              margin: 17vw 0 0 0;
+            }
+          .input-wrapper {
+                display: grid;
+                margin: 0;
+          .input-group {
+            width: 100% !important;
+            margin-top: 5vw;
+          label {
+                font-size: calc(25px + 0.390625vw);
+          }
+          input,
+          textarea {
+                width: 100%;
+                padding: 5px;
+                border: none;
+                border-bottom: 1px solid $line;
+                resize: none;
+                font-size: calc(16px + 0.390625vw);
+          }& input:focus, textarea:focus{
+                outline: none;
+        }
+      }
+    }
+          .input-wrapper-1 {
+            display: flex;
+            justify-content: center;
+            margin-top: 50px;
+            width: 100%;
+            max-width: 960px;
+          .input-group-1 {
+                width: 100%;
+                max-width: 960px;
+            label {
+                font-size: calc(25px + 0.390625vw);
+            }
+            input,
+            textarea {
+                width: 100%;
+                max-width: 960px;
+                padding: 5px;
+                border: none;
+                border-bottom: 1px solid $line;
+                resize: none;
+                font-size: calc(16px + 0.390625vw);
+            }
+            & input:focus, textarea:focus{
+                outline: none;
+            }
+          }
+        }
+        .input-wrapper-submit{
+        button[type="submit"] {
+            margin-top: 5%;
+            background-color: $ctbutton;
+            color: $fontlight;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 12px;
+            font-size: calc(15px + 0.390625vw);
+            transition: ease-in-out 0.2s;
+          &:hover {
+            transform: scale(1.05);
+            transition: ease-in-out 0.2s;
+            color: $font;
+          }
+        }
+        .ig,.fb,.gh{
+          margin-left: 10px;
+          width: 60px;
+          height: auto;
+          margin-top: 5%;
+          transition: ease-in-out 0.2s;
+          border-radius: 12px;
+        }
+        & .ig:hover,.fb:hover,.gh:hover{
+          transform: scale(1.05);
+          transition: ease-in-out 0.2s;
+        }
+        img{
+          width: 45px;
+          height: 45px;
+        }
+      }
+    }
+  }
\ No newline at end of file

Lopputyö/style.css

@@ -384,6 +384,100 @@ section {
   height: 56px;
 }
 
+@media only screen and (max-width: 400px) {
+  .contact {
+    padding: 0 !important;
+  }
+  .contact h1 {
+    font-size: 11vw !important;
+    margin: 0;
+  }
+  .contact form {
+    width: 90% !important;
+    margin: 17vw 0 0 0;
+  }
+  .contact .input-wrapper {
+    display: grid;
+    margin: 0;
+  }
+  .contact .input-wrapper .input-group {
+    width: 100% !important;
+    margin-top: 5vw;
+  }
+  .contact .input-wrapper .input-group label {
+    font-size: calc(25px + 0.390625vw);
+  }
+  .contact .input-wrapper .input-group input,
+  .contact .input-wrapper .input-group textarea {
+    width: 100%;
+    padding: 5px;
+    border: none;
+    border-bottom: 1px solid #414141;
+    resize: none;
+    font-size: calc(16px + 0.390625vw);
+  }
+  .contact .input-wrapper .input-group input:focus, .contact .input-wrapper .input-group textarea:focus {
+    outline: none;
+  }
+  .contact .input-wrapper-1 {
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+    width: 100%;
+    max-width: 960px;
+  }
+  .contact .input-wrapper-1 .input-group-1 {
+    width: 100%;
+    max-width: 960px;
+  }
+  .contact .input-wrapper-1 .input-group-1 label {
+    font-size: calc(25px + 0.390625vw);
+  }
+  .contact .input-wrapper-1 .input-group-1 input,
+  .contact .input-wrapper-1 .input-group-1 textarea {
+    width: 100%;
+    max-width: 960px;
+    padding: 5px;
+    border: none;
+    border-bottom: 1px solid #414141;
+    resize: none;
+    font-size: calc(16px + 0.390625vw);
+  }
+  .contact .input-wrapper-1 .input-group-1 input:focus, .contact .input-wrapper-1 .input-group-1 textarea:focus {
+    outline: none;
+  }
+  .contact .input-wrapper-submit button[type=submit] {
+    margin-top: 5%;
+    background-color: #e6b294;
+    color: #f8f8f8;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 12px;
+    font-size: calc(15px + 0.390625vw);
+    transition: ease-in-out 0.2s;
+  }
+  .contact .input-wrapper-submit button[type=submit]:hover {
+    transform: scale(1.05);
+    transition: ease-in-out 0.2s;
+    color: #414141;
+  }
+  .contact .input-wrapper-submit .ig, .contact .input-wrapper-submit .fb, .contact .input-wrapper-submit .gh {
+    margin-left: 10px;
+    width: 60px;
+    height: auto;
+    margin-top: 5%;
+    transition: ease-in-out 0.2s;
+    border-radius: 12px;
+  }
+  .contact .input-wrapper-submit .ig:hover, .contact .input-wrapper-submit .fb:hover, .contact .input-wrapper-submit .gh:hover {
+    transform: scale(1.05);
+    transition: ease-in-out 0.2s;
+  }
+  .contact .input-wrapper-submit img {
+    width: 45px;
+    height: 45px;
+  }
+}
 .navbar {
   position: fixed;
   bottom: 2%;