--- a/client/src/components/Zoom.vue	Mon Mar 11 11:14:44 2019 +0100
+++ b/client/src/components/Zoom.vue	Mon Mar 11 11:34:54 2019 +0100
@@ -1,22 +1,19 @@
 <template>
-  <div
-    class="d-flex buttoncontainer shadow-xs mb-2 position-absolute"
-    :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''"
-  >
+  <div :class="['zoom-buttons shadow-xs', { splitscreen: showSplitscreen }]">
     <button
-      class="zoomButton border-0 bg-white rounded-left ui-element"
+      class="zoom-button border-0 bg-white rounded-left ui-element"
       @click="zoomOut"
     >
       <font-awesome-icon icon="minus"></font-awesome-icon>
     </button>
     <button
-      class="zoomButton border-0 bg-white ui-element border-right"
+      class="zoom-button border-0 bg-white ui-element border-right"
       @click="refreshMap"
     >
       <font-awesome-icon icon="redo"></font-awesome-icon>
     </button>
     <button
-      class="zoomButton border-0 bg-white rounded-right ui-element border-right"
+      class="zoom-button border-0 bg-white rounded-right ui-element border-right"
       @click="zoomIn"
     >
       <font-awesome-icon icon="plus"></font-awesome-icon>
@@ -24,22 +21,25 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-.buttoncontainer {
-  bottom: 0;
-  left: 50%;
-  margin-left: -$icon-width;
-  transition: margin-bottom 0.3s;
-}
+<style lang="sass" scoped>
+.zoom-buttons
+  position: absolute
+  bottom: $small-offset
+  left: 50%
+  margin-left: -($icon-width * 1.5)
+  margin-bottom: 0
+  transition: margin-bottom 0.3s
+  &.splitscreen
+    margin-bottom: 50vh
 
-.zoomButton {
-  min-height: $icon-width;
-  min-width: $icon-width;
-  z-index: 1;
-  outline: none;
-  color: #666;
-}
+  .zoom-button
+    min-height: $icon-width
+    min-width: $icon-width
+    z-index: 1
+    outline: none
+    color: #666
 </style>
+
 <script>
 /* This is Free Software under GNU Affero General Public License v >= 3.0
  * without warranty, see README.md and license for details.