Contact modal for mobile fixes

web/dist/main.css

@@ -73,7 +73,11 @@ html {
 }
 
 .right-content {
-  overflow-y: auto;
+  /*overflow-y: auto;*/
+
+    overflow-y: scroll; /* has to be scroll, not auto */
+
+      -webkit-overflow-scrolling: touch;
   height: 100%;
   padding: 10px 10px 0;
 }
@@ -527,7 +531,7 @@ html {
   }
 
   .where-to:focus {
-    /*width: 85%;*/
+    width: 85%;
   }
 
   .view-types {
@@ -583,7 +587,11 @@ html {
   .map-list-view {
     width: 100%;
     border: 1px solid red;
-    overflow-y: auto;
+    /*overflow-y: auto;*/
+    overflow-y: scroll; /* has to be scroll, not auto */
+
+      -webkit-overflow-scrolling: touch;
+
     height: 100%;
     padding-top: 60px;
   }
@@ -591,6 +599,7 @@ html {
   .right-content .listings {
     display: none;
   }
+
 }
 
 /*
@@ -671,12 +680,13 @@ html {
 }
 
 .ld-image-container {
-  height: 375px;
+  max-height: 335px;
   width: 500px;
   text-align: center;
   position: relative;
   user-select: none;
   cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 
 .ld-image-container .prev-button {
@@ -685,6 +695,7 @@ html {
   left: 0px;
   height: 100%;
   width: 50%;
+  user-select: none;
 }
 
 .ld-image-container .next-button {
@@ -693,6 +704,7 @@ html {
   right: 0px;
   height: 100%;
   width: 50%;
+  user-select: none;
 }
 
 .ld-image-container .prev-button div,
@@ -709,7 +721,7 @@ html {
 .ld-image-container img {
   /*width: 100%;*/
   /*height: 100%;*/
-  max-height: 375px;
+  max-height: 335px;
   max-width: 500px;
 }
 
@@ -865,6 +877,18 @@ h5 {
 
 
 
+
+@media (min-width : 768px) {
+  .modal > div {
+    width: 460px;
+    position: relative;
+    margin: 5% auto;
+    padding: 5px 20px 13px 20px;
+    border-radius: 10px;
+    background: #fff;
+  }
+}
+
 .modal {
     position: fixed;
     font-family: Arial, Helvetica, sans-serif;
@@ -881,15 +905,6 @@ h5 {
     pointer-events: auto;
 }
 
-.modal > div {
-    width: 460px;
-    position: relative;
-    margin: 5% auto;
-    padding: 5px 20px 13px 20px;
-    border-radius: 10px;
-    background: #fff;
-}
-
 .modal h3 {
   color: #575a60;
   font-size: 18px;
@@ -955,11 +970,53 @@ h5 {
   cursor: pointer;
 }
 
-.contact-form-alert {
-  font-size: 0.9em;
+@media (max-width: 768px) {
+  .modal h3 {
+    text-align: center;
+  }
+
+  .modal > div {
+    position: relative;
+    margin: 0;
+    padding: 5px 20px 13px 20px;
+    border-radius: 0;
+    background: #fff;
+    height: 100%;
+    width: 100%;
+  }
+
+  .contact-form input,
+  .contact-form textarea {
+    width: 100%;
+  }
+
+  .contact-form-email-phone input:first-child {
+    width: 100%;
+    margin: 0px;
+  }
+
+  .contact-form-email-phone input:last-child {
+    margin: 0;
+    width: 100%;
+  }
+
+  .contact-form-email-phone input:last-child {
+    width: 100%;
+    margin-top: 15px;
+    margin-left: 0px;
+  }
+
+  .contact-form-alert input {
+    width: 20px
+  }
+
+  .contact-form-alert {
+    text-align: center;
+  }
 }
 
 .noselect {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */