From dc097cbf5a0e983dfb68a4c3220e7964e2d6076d Mon Sep 17 00:00:00 2001
From: Charlotte <charlotte.emms@theguardian.com>
Date: Fri, 26 Jun 2026 11:35:23 +0100
Subject: [PATCH 1/2] remove page conditions from mobile sticky styles, only
 render component if renderAds is true

---
 .../src/components/AdSlot.web.tsx             | 26 +++++--------------
 dotcom-rendering/src/layouts/AudioLayout.tsx  |  8 +++---
 .../src/layouts/CommentLayout.tsx             |  7 +++--
 .../src/layouts/CrosswordLayout.tsx           |  6 +----
 .../src/layouts/FullPageInteractiveLayout.tsx |  7 +++--
 .../src/layouts/ImmersiveLayout.tsx           |  5 +---
 .../src/layouts/InteractiveLayout.tsx         |  8 +++---
 dotcom-rendering/src/layouts/LiveLayout.tsx   |  8 +++---
 .../src/layouts/NewsletterSignupLayout.tsx    |  6 +----
 .../src/layouts/PictureLayout.tsx             |  7 +++--
 .../src/layouts/StandardLayout.tsx            |  8 +++---
 11 files changed, 30 insertions(+), 66 deletions(-)

diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
index 3d11ac25d99..a99eb58d2f9 100644
--- a/dotcom-rendering/src/components/AdSlot.web.tsx
+++ b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -10,7 +10,6 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import { Hide } from '@guardian/source/react-components';
-import type { FEArticle } from '../frontend/feArticle';
 import { labelBoxStyles, labelHeight, labelStyles } from '../lib/adStyles';
 import { ArticleDisplay } from '../lib/articleFormat';
 import { center as layoutCenterStyles } from '../lib/center';
@@ -990,22 +989,9 @@ export const AdSlot = ({
 	}
 };
 
-type MobileStickyContainerProps = Pick<FEArticle, 'contentType' | 'pageId'>;
-
-export const MobileStickyContainer = ({
-	contentType,
-	pageId,
-}: MobileStickyContainerProps) => {
-	return (
-		<div
-			className="mobilesticky-container"
-			css={[
-				mobileStickyAdStyles,
-				(contentType === 'Article' ||
-					contentType === 'Interactive' ||
-					pageId.startsWith('football/')) &&
-					mobileStickyAdStylesFullWidth,
-			]}
-		/>
-	);
-};
+export const MobileStickyContainer = () => (
+	<div
+		className="mobilesticky-container"
+		css={[mobileStickyAdStyles, mobileStickyAdStylesFullWidth]}
+	/>
+);
diff --git a/dotcom-rendering/src/layouts/AudioLayout.tsx b/dotcom-rendering/src/layouts/AudioLayout.tsx
index c0e8918f1f2..94aebed7489 100644
--- a/dotcom-rendering/src/layouts/AudioLayout.tsx
+++ b/dotcom-rendering/src/layouts/AudioLayout.tsx
@@ -734,11 +734,9 @@ export const AudioLayout = (props: WebProps | AppProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						data-print-layout="hide"
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 			{isApps && (
diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx
index 96c724fc5f2..96e11c49bd2 100644
--- a/dotcom-rendering/src/layouts/CommentLayout.tsx
+++ b/dotcom-rendering/src/layouts/CommentLayout.tsx
@@ -918,10 +918,9 @@ export const CommentLayout = (props: WebProps | AppsProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 			{isApps && (
diff --git a/dotcom-rendering/src/layouts/CrosswordLayout.tsx b/dotcom-rendering/src/layouts/CrosswordLayout.tsx
index 4d00b8bb68e..c58724e4a1e 100644
--- a/dotcom-rendering/src/layouts/CrosswordLayout.tsx
+++ b/dotcom-rendering/src/layouts/CrosswordLayout.tsx
@@ -513,11 +513,7 @@ export const CrosswordLayout = (props: Props) => {
 					/>
 				</Island>
 			</BannerWrapper>
-			<MobileStickyContainer
-				data-print-layout="hide"
-				contentType={article.contentType}
-				pageId={article.pageId}
-			/>
+			{renderAds && <MobileStickyContainer data-print-layout="hide" />}
 		</>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
index ee2db3e4b95..2322ffb5168 100644
--- a/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/FullPageInteractiveLayout.tsx
@@ -367,10 +367,9 @@ export const FullPageInteractiveLayout = (props: WebProps | AppsProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 		</>
diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
index 2ed4cb49eb7..896dd0547e0 100644
--- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx
@@ -1001,10 +1001,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => {
 						</Island>
 					</BannerWrapper>
 					{renderAds && (
-						<MobileStickyContainer
-							contentType={article.contentType}
-							pageId={article.pageId}
-						/>
+						<MobileStickyContainer data-print-layout="hide" />
 					)}
 				</>
 			)}
diff --git a/dotcom-rendering/src/layouts/InteractiveLayout.tsx b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
index 0fc4f979ba4..442be07969b 100644
--- a/dotcom-rendering/src/layouts/InteractiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/InteractiveLayout.tsx
@@ -810,11 +810,9 @@ export const InteractiveLayout = (props: WebProps | AppsProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						data-print-layout="hide"
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 			{isApps && (
diff --git a/dotcom-rendering/src/layouts/LiveLayout.tsx b/dotcom-rendering/src/layouts/LiveLayout.tsx
index 1195e8f62df..aa236c351a2 100644
--- a/dotcom-rendering/src/layouts/LiveLayout.tsx
+++ b/dotcom-rendering/src/layouts/LiveLayout.tsx
@@ -1110,11 +1110,9 @@ export const LiveLayout = (props: WebProps | AppsProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						data-print-layout="hide"
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 
diff --git a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
index ee0b59a2e1e..f44518ab711 100644
--- a/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
+++ b/dotcom-rendering/src/layouts/NewsletterSignupLayout.tsx
@@ -489,11 +489,7 @@ export const NewsletterSignupLayout = ({
 			</Section>
 
 			<BannerWrapper data-print-layout="hide" />
-			<MobileStickyContainer
-				data-print-layout="hide"
-				contentType={article.contentType}
-				pageId={article.pageId}
-			/>
+			{renderAds && <MobileStickyContainer data-print-layout="hide" />}
 		</>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/PictureLayout.tsx b/dotcom-rendering/src/layouts/PictureLayout.tsx
index c9c84eed4bc..8a2395bdc4b 100644
--- a/dotcom-rendering/src/layouts/PictureLayout.tsx
+++ b/dotcom-rendering/src/layouts/PictureLayout.tsx
@@ -763,10 +763,9 @@ export const PictureLayout = (props: WebProps | AppsProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 			{isApps && (
diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx
index 78d86de2e1c..8596854d66a 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.tsx
@@ -816,11 +816,9 @@ export const StandardLayout = (props: WebProps | AppProps) => {
 							/>
 						</Island>
 					</BannerWrapper>
-					<MobileStickyContainer
-						data-print-layout="hide"
-						contentType={article.contentType}
-						pageId={article.pageId}
-					/>
+					{renderAds && (
+						<MobileStickyContainer data-print-layout="hide" />
+					)}
 				</>
 			)}
 

From 3822ddeeaa2fbe549453fc8bfc1b04f0cb86589f Mon Sep 17 00:00:00 2001
From: Charlotte <charlotte.emms@theguardian.com>
Date: Fri, 26 Jun 2026 11:40:47 +0100
Subject: [PATCH 2/2] combine full width styles with general styles for
 mobile-sticky

---
 .../src/components/AdSlot.web.tsx             | 21 ++++++-------------
 1 file changed, 6 insertions(+), 15 deletions(-)

diff --git a/dotcom-rendering/src/components/AdSlot.web.tsx b/dotcom-rendering/src/components/AdSlot.web.tsx
index a99eb58d2f9..d34a797a061 100644
--- a/dotcom-rendering/src/components/AdSlot.web.tsx
+++ b/dotcom-rendering/src/components/AdSlot.web.tsx
@@ -349,16 +349,19 @@ const liveBlogTopContainerStyles = css`
 `;
 
 const mobileStickyAdStyles = css`
+	z-index: ${getZIndex('mobileSticky')};
 	position: fixed;
 	bottom: 0;
-	width: 320px;
+	width: 100%;
 	margin: 0 auto;
 	right: 0;
 	left: 0;
-	z-index: ${getZIndex('mobileSticky')};
+	text-align: center;
+	background-color: ${schemedPalette('--ad-background')};
 	${from.phablet} {
 		display: none;
 	}
+
 	.ad-slot__close-button {
 		display: none;
 		position: absolute;
@@ -401,15 +404,6 @@ const mobileStickyAdStyles = css`
 		display: block;
 		position: relative;
 		${labelBoxStyles}
-	}
-`;
-
-const mobileStickyAdStylesFullWidth = css`
-	width: 100%;
-	text-align: center;
-	background-color: ${palette.neutral[97]};
-
-	.ad-slot[data-label-show='true']::before {
 		padding-left: calc((100% - ${adSizes.mobilesticky.width}px) / 2);
 		padding-right: calc((100% - ${adSizes.mobilesticky.width}px) / 2);
 	}
@@ -990,8 +984,5 @@ export const AdSlot = ({
 };
 
 export const MobileStickyContainer = () => (
-	<div
-		className="mobilesticky-container"
-		css={[mobileStickyAdStyles, mobileStickyAdStylesFullWidth]}
-	/>
+	<div className="mobilesticky-container" css={mobileStickyAdStyles} />
 );