2 files changed, 13 insertions, 7 deletions
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 31cd86153..09304aabf 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -915,7 +915,7 @@ a:hover.button-left {
 #map_box{
   @extend .full-width;
   background: #333;
-  height: 10em;
+  height: 29em;
   margin-bottom: 1em;
   overflow: hidden;
   position: relative;
@@ -929,7 +929,7 @@ a:hover.button-left {
 // Left and right so that zoom can be left, pan right.
 #fms_pan_zoom {
   right: 0.5em !important;
-  top: 2.75em !important;
+  top: 0.5em !important;
   left: 0.5em !important;
 }
 // The left and right of the above causes the navigation to move off-screen left in IE6.
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index d1c825a2b..3f8fb4f4e 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -75,23 +75,29 @@ function tabs(elem)
 
 
 $(function(){
-    $('html').removeClass('no-js').addClass('js');
+    var $html = $('html'),
+        $map_box = $('#map_box');
+
+    $html.removeClass('no-js').addClass('js');
 
     // Preload the new report pin
     document.createElement('img').src = '/i/pin-green.png';
 
     //add mobile class if small screen
     if (Modernizr.mq('only screen and (max-width:47.9375em)')) {
-        $('html').addClass('mobile');
+        $html.addClass('mobile');
+        $map_box.css({ height: '10em' });
         if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
             // Immediately go full screen map if on around page
             $('#site-header').hide();
-            $('#map_box').prependTo('.wrapper').css({
+            $map_box.prependTo('.wrapper').css({
                 position: 'absolute',
                 top: 0, left: 0, right: 0, bottom: 0,
                 height: 'auto',
                 margin: 0
             });
+            // Bit yucky, but the ID doesn't exist yet.
+            $("<style>#fms_pan_zoom { top: 2.75em !important; }</style>").appendTo(document.documentElement);
             $('.big-green-banner')
                 .addClass('mobile-map-banner')
                 .removeClass('.big-green-banner')
@@ -101,11 +107,11 @@ $(function(){
     } else {
         // Make map full screen on non-mobile sizes.
         var map_pos = 'fixed', map_height = '100%';
-        if ($('html').hasClass('ie6')) {
+        if ($html.hasClass('ie6')) {
             map_pos = 'absolute';
             map_height = $(window).height();
         }
-        $('#map_box').prependTo('.wrapper').css({
+        $map_box.prependTo('.wrapper').css({
             zIndex: 0, position: map_pos,
             top: 0, left: 0, right: 0, bottom: 0,
             width: '100%', height: map_height,