diff --git a/app/assets/stylesheets/map.scss b/app/assets/stylesheets/map.scss
index 49147fc6a..4defbef45 100644
--- a/app/assets/stylesheets/map.scss
+++ b/app/assets/stylesheets/map.scss
@@ -83,7 +83,7 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
       // visible outline so it can be set to a colour by the OS.
       border: solid 2px $govuk-focus-colour;
       box-sizing: border-box; // make sure height includes the border
-      line-height: 26px; // subtract the border from the height (normally 30px)
+      line-height: 22px; // subtract the border from the height (normally 26px)
 
       // The inline display box for the button text overlaps the button edge.
       // This is only visible in high contrast mode because of the background colour being set.
@@ -152,6 +152,11 @@ $zoom-button-hover-colour: govuk-shade($zoom-button-colour, 10%);
 
 }
 
+// buttons are 30px for touch-capable devices/browsers
+.leaflet-touch .leaflet-bar a:focus {
+  line-height: 26px; // subtract the border from the height (normally 30px)
+}
+
 // Map attribution links
 .leaflet-control-attribution {
   & a {