Some map resizings depending upon viewport size.

2 files changed, 79 insertions, 8 deletions

diff --git a/web/css/_main.scss b/web/css/_main.scss
index d74d70ceb..8b018677d 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -29,7 +29,7 @@ h2 {
 
 select, input, textarea {
     font-size: 99%;
-    max-width: 99%;
+    max-width: 95%;
 }
 
 #mysociety {
diff --git a/web/css/core.scss b/web/css/core.scss
index 17bf4e6c2..21d75d04d 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -163,7 +163,7 @@ $map_width: 500px;
 
     fieldset, .fieldset {
         border: none;
-        padding: 0.5em;
+        margin: 0.5em;
         div {
             margin-top: 2px;
             clear: left;
@@ -241,12 +241,6 @@ $map_width: 500px;
 
     /* Drag is only present in noscript form */
     #drag {
-        position: absolute;
-        width: $map_width;
-        height: $map_width;
-        right: 0;
-        top: 0;
-
         input, img {
             position: absolute;
             border: none;
@@ -622,6 +616,83 @@ $map_width: 500px;
             margin-bottom: 1em;
         }
 
+        fieldset, .fieldset {
+            margin: 1em;
+        }
+
+        label {
+            margin-top: 1em;
+            display: block;
+            float: none;
+            text-align: left;
+            padding-right: 0;
+            width: auto;
+        }
+        .fieldset div.checkbox, #problem_submit {
+            padding-left: 0;
+        }
+        .fieldset div.checkbox label, label.n {
+            display: inline;
+        }
+    }
+}
+
+@media all and (max-width: 750px) {
+    $map_width: 365px;
+    #mysociety {
+        #map_box {
+            padding-left: 10px;
+            width: $map_width + 2px;
+            height: $map_width + 2px;
+        }
+        #map {
+            width: $map_width;
+            height: $map_width;
+        }
+        .banner {
+            margin-right: $map_width + 20px;
+        }
+    }
+    .no-js #mysociety {
+        #text_map { }
+        #text_map_arrow { }
+        #side, #side-form { }
+    }
+}
+
+@media all and (max-width: 580px) {
+    $map_width: 235px;
+    #mysociety {
+        #map_box {
+            width: $map_width + 2px;
+            height: $map_width + 2px;
+        }
+        #map {
+            width: $map_width;
+            height: $map_width;
+        }
+        .banner {
+            margin-right: $map_width + 20px;
+        }
+    }
+}
+
+@media all and (max-width: 320px) {
+    #mysociety {
+        #map_box {
+            padding-left: 0;
+            float: none;
+            width: 100%;
+        }
+        #map {
+            width: 99%;
+        }
+
+        .banner {
+            margin-right: 0;
+            margin-top: 1em;
+        }
+
     }
 }