added responsiveness to modal and edit page

app/assets/stylesheets/pages/_contacts.scss

@@ -100,6 +100,8 @@ a:hover {
   align-items: center;
 }
 
+// Modal
+
 .modal-header {
   border-bottom: 0px;
   i {
@@ -109,6 +111,7 @@ a:hover {
 
 .modal-color {
   background-color: $card-background;
+  min-width: 296px;
 }
 
 .vertical-alignment-helper {
@@ -142,6 +145,20 @@ a:hover {
   align-items: center;
 }
 
+.modal-flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+@media only screen and (max-width: 1100px) {
+    .modal-picture {
+      width: 50px;
+    }
+}
+
+
+// Contact
+
 .contact {
   color: white;
 }

app/assets/stylesheets/users/_edit.scss

@@ -3,7 +3,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: calc(100vh - 4.5em); // 4.5em is height of navbar
+  padding-top: 30px;
+  // height: calc(100vh - 4.5em); // 4.5em is height of navbar
 
   form {
     flex-grow: 1;
@@ -22,10 +23,18 @@
 
     img {
       max-width: 50vw;
+      padding-top: 30px;
     }
   }
 }
 
+.small-profile-pic {
+  img {
+    width: 223px;
+    margin-bottom: 20px;
+  }
+}
+
 .profile-form {
   display: grid;
   grid-template-columns: 1fr 1fr;