diff --git a/resources/skins.citizen.styles/common/common.less b/resources/skins.citizen.styles/common/common.less
index 668b3c3f..fe4a42fb 100644
--- a/resources/skins.citizen.styles/common/common.less
+++ b/resources/skins.citizen.styles/common/common.less
@@ -3,8 +3,6 @@
 */
 html {
 	box-sizing: border-box;
-	// Not ideal but it works
-	scroll-padding-top: 6rem;
 }
 
 html,
diff --git a/resources/skins.citizen.styles/components/StickyHeader.less b/resources/skins.citizen.styles/components/StickyHeader.less
index cd458611..d90b2e25 100644
--- a/resources/skins.citizen.styles/components/StickyHeader.less
+++ b/resources/skins.citizen.styles/components/StickyHeader.less
@@ -85,6 +85,10 @@
 	}
 }
 
+html {
+	scroll-padding-top: ~'calc( var( --height-sticky-header ) + var( --space-xl ) )';
+}
+
 /*
  * T289817 `.mw-sticky-header-element` provides an API for template developers
  * to make their templates compatible with the Citizen sticky header.