Add wrapper div for merchandising slots

guardian · Nov 16, 2023 · cc14d0d · cc14d0d
1 parent 5dfdb0d
commit cc14d0d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 16 deletions.
diff --git a/common/app/views/fragments/commercial/commercialComponent.scala.html b/common/app/views/fragments/commercial/commercialComponent.scala.html
@@ -1,10 +1,12 @@
 @()(implicit request: RequestHeader)
 
-@fragments.commercial.adSlot(
-    "merchandising",
-    Seq("commercial-component"),
-    Map(),
-    showLabel=false,
-    refresh=false,
-    useFlexContainer = true
-){ }
+<div class="merchandising-wrapper">
+    @fragments.commercial.adSlot(
+        "merchandising",
+        Seq("commercial-component"),
+        Map(),
+        showLabel=false,
+        refresh=false,
+        useFlexContainer = true
+    ){ }
+</div>
diff --git a/common/app/views/fragments/commercial/commercialComponentHigh.scala.html b/common/app/views/fragments/commercial/commercialComponentHigh.scala.html
@@ -1,10 +1,12 @@
 @(isPaidContent: Boolean, hasPageSkin: Boolean = false)(implicit request: RequestHeader)
 
-@fragments.commercial.adSlot(
-    "merchandising-high",
-    Seq("commercial-component-high"),
-    Map(),
-    showLabel=false,
-    refresh=false,
-    useFlexContainer = true
-){ }
+<div class="merchandising-high-wrapper">
+    @fragments.commercial.adSlot(
+        "merchandising-high",
+        Seq("commercial-component-high"),
+        Map(),
+        showLabel=false,
+        refresh=false,
+        useFlexContainer = true
+    ){ }
+</div>
diff --git a/static/src/stylesheets/module/_adslot.scss b/static/src/stylesheets/module/_adslot.scss
@@ -107,6 +107,17 @@
     margin-right: auto;
 }
 
+.merchandising-wrapper,
+.merchandising-high-wrapper {
+    position: relative;
+    margin: auto;
+    @each $breakpoint, $container-width in $breakpoints {
+        @include mq($breakpoint) {
+            max-width: $container-width;
+        }
+    }
+}
+
 .ad-slot--crossword-banner,
 .ad-slot--top-banner-ad-desktop {
     margin: 0 auto;