Set map height in CSS; smaller for phones.

In future we should consider making classes for different sizes of maps.

app/assets/stylesheets/bootstrap_and_overrides.css.less

@@ -147,6 +147,10 @@ p.stats {
   margin-left: 0px;
 }
 
+#map {
+  height: 500px;
+}
+
 // Overrides applying only to mobile view
 
 @media only screen and (max-width: 767px) {
@@ -155,4 +159,8 @@ p.stats {
     border-left: none;
     padding-left: 0;
   }
+
+  #map {
+    height: 300px;
+  }
 }

app/views/places/index.html.haml

@@ -1,6 +1,6 @@
 -content_for :title, "Places"
 
-%div#map{ :style => "height:500px"}
+%div#map
 
 <script src="/assets/leaflet.js?body=1" type="text/javascript"></script>