diff --git a/res/css/components/views/location/_ZoomButtons.scss b/res/css/components/views/location/_ZoomButtons.scss
index 59d52477f9..d6e40e5a49 100644
--- a/res/css/components/views/location/_ZoomButtons.scss
+++ b/res/css/components/views/location/_ZoomButtons.scss
@@ -18,28 +18,28 @@ limitations under the License.
     position: absolute;
     bottom: $spacing-32;
     right: $spacing-24;
-}
-
-.mx_ZoomButtons_button {
-    @mixin ButtonResetDefault;
-
-    margin-top: $spacing-8;
-    border-radius: 4px;
     display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    flex-direction: column;
+    row-gap: $spacing-8;
 
-    height: 24px;
-    width: 24px;
+    .mx_ZoomButtons_button {
+        $ZoomButtons_button-size: 24px;
 
-    background: $background;
-    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
-}
-
-.mx_ZoomButtons_icon {
-    height: 10px;
-    width: 10px;
-
-    color: $primary-content;
+        border-radius: 4px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: $ZoomButtons_button-size;
+        width: $ZoomButtons_button-size;
+        background: $background;
+        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
+
+        .mx_ZoomButtons_icon {
+            $ZoomButtons_icon-size: 10px;
+
+            height: $ZoomButtons_icon-size;
+            width: $ZoomButtons_icon-size;
+            color: $primary-content;
+        }
+    }
 }