diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx
index 1182aa660a6..480f4b620cb 100644
--- a/dotcom-rendering/src/components/Figure.tsx
+++ b/dotcom-rendering/src/components/Figure.tsx
@@ -331,6 +331,11 @@ export const Figure = ({
 						articleArrangement === 'immersiveLandscape',
 						format.theme === ArticleSpecial.Labs,
 					),
+					articleArrangement === 'immersivePortrait' &&
+						css`
+							height: auto;
+							aspect-ratio: 4 / 5;
+						`,
 					articleArrangement === 'immersivePortrait' &&
 						format.design === ArticleDesign.WeekendEssay &&
 						css`
diff --git a/dotcom-rendering/src/components/MostViewedFooterLayout.tsx b/dotcom-rendering/src/components/MostViewedFooterLayout.tsx
index a6c723a9704..d56291bec63 100755
--- a/dotcom-rendering/src/components/MostViewedFooterLayout.tsx
+++ b/dotcom-rendering/src/components/MostViewedFooterLayout.tsx
@@ -86,7 +86,7 @@ const frontStyles = (hasPageSkin: boolean) => css`
 
 const adFreeStyles = css`
 	${between.desktop.and.leftCol} {
-		min-width: 960px;
+		min-width: min(960px, 100%);
 	}
 	${between.leftCol.and.wide} {
 		width: 75%;
diff --git a/dotcom-rendering/src/grid.ts b/dotcom-rendering/src/grid.ts
index 8e06aa0b682..280dc1f295b 100644
--- a/dotcom-rendering/src/grid.ts
+++ b/dotcom-rendering/src/grid.ts
@@ -26,13 +26,13 @@ type Line =
 const mobileColumns =
 	'[grid-start] 0px [centre-column-start] repeat(6, 1fr) [centre-column-end] 0px [grid-end]';
 const tabletColumns =
-	'[grid-start] 1fr [centre-column-start] repeat(12, 40px) [centre-column-end] 1fr [grid-end]';
+	'[grid-start] 1fr [centre-column-start] repeat(12, minmax(0, 40px)) [centre-column-end] 1fr [grid-end]';
 const desktopColumns =
-	'[grid-start] 1fr [centre-column-start] repeat(8, 60px) [centre-column-end right-column-start] repeat(4, 60px) [right-column-end] 1fr [grid-end]';
+	'[grid-start] 1fr [centre-column-start] repeat(8, minmax(0, 60px)) [centre-column-end right-column-start] repeat(4, minmax(0, 60px)) [right-column-end] 1fr [grid-end]';
 const leftColColumns =
-	'[grid-start] 1fr [left-column-start] repeat(2, 60px) [left-column-end centre-column-start] repeat(8, 60px) [centre-column-end right-column-start] repeat(4, 60px) [right-column-end] 1fr [grid-end]';
+	'[grid-start] 1fr [left-column-start] repeat(2, minmax(0, 60px)) [left-column-end centre-column-start] repeat(8, minmax(0, 60px)) [centre-column-end right-column-start] repeat(4, minmax(0, 60px)) [right-column-end] 1fr [grid-end]';
 const wideColumns =
-	'[grid-start] 1fr [left-column-start] repeat(3, 60px) [left-column-end centre-column-start] repeat(8, 60px) [centre-column-end] 60px [right-column-start] repeat(4, 60px) [right-column-end] 1fr [grid-end]';
+	'[grid-start] 1fr [left-column-start] repeat(3, minmax(0, 60px)) [left-column-end centre-column-start] repeat(8, minmax(0, 60px)) [centre-column-end] minmax(0, 60px) [right-column-start] repeat(4, minmax(0, 60px)) [right-column-end] 1fr [grid-end]';
 const mobileColumnGap = '10px';
 const columnGap = '20px';
 
diff --git a/dotcom-rendering/src/layouts/StandardLayout.stories.tsx b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx
index 3ce38006e1d..3ad06af86e3 100644
--- a/dotcom-rendering/src/layouts/StandardLayout.stories.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayout.stories.tsx
@@ -1,7 +1,9 @@
+import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, within } from 'storybook/test';
 import { allModes } from '../../.storybook/modes';
 import { Audio as AudioFixture } from '../../fixtures/generated/fe-articles/Audio';
+import { Recipe as RecipeFixture } from '../../fixtures/generated/fe-articles/Recipe';
 import { Standard as StandardFixture } from '../../fixtures/generated/fe-articles/Standard';
 import { ArticleDesign, ArticleDisplay } from '../lib/articleFormat';
 import { getCurrentPillar } from '../lib/layoutHelpers';
@@ -241,3 +243,78 @@ export const WebImmersiveMobile: Story = {
 		await expect(height).toBeCloseTo((width * 5) / 4, 0);
 	},
 };
+
+const webImmersivePortraitArticle = enhanceArticleType(
+	{
+		...RecipeFixture,
+		format: {
+			...RecipeFixture.format,
+			display: 'ImmersiveDisplay',
+		},
+		mainMediaElements: RecipeFixture.mainMediaElements.map((element) =>
+			element._type ===
+			'model.dotcomrendering.pageElements.ImageBlockElement'
+				? {
+						...element,
+						media: {
+							...element.media,
+							allImages: element.media.allImages.map((image) => ({
+								...image,
+								fields: {
+									...image.fields,
+									aspectRatio: `${image.fields.width}:${image.fields.height}`,
+								},
+							})),
+						},
+					}
+				: element,
+		),
+	},
+	'Web',
+);
+const immersivePortraitFormat = {
+	design: webImmersivePortraitArticle.design,
+	display: webImmersivePortraitArticle.display,
+	theme: webImmersivePortraitArticle.theme,
+};
+
+export const WebImmersivePortrait: Story = {
+	args: {
+		renderingTarget: 'Web',
+		NAV: {
+			...extractNAV(webImmersivePortraitArticle.frontendData.nav),
+			selectedPillar: getCurrentPillar(
+				webImmersivePortraitArticle.frontendData,
+			),
+		},
+		article: {
+			...webImmersivePortraitArticle.frontendData,
+			shouldHideAds: true,
+		},
+		format: immersivePortraitFormat,
+	},
+	parameters: {
+		formats: [immersivePortraitFormat],
+		chromatic: {
+			modes: {
+				'light mobile': allModes['light mobile'],
+				'light mobileMedium': allModes['light mobileMedium'],
+				'light mobileLandscape': {
+					...allModes.light,
+					viewport: breakpoints.mobileLandscape,
+				},
+				'light phablet': {
+					...allModes.light,
+					viewport: breakpoints.phablet,
+				},
+				'light tablet': {
+					...allModes.light,
+					viewport: breakpoints.tablet,
+				},
+				'light desktop': allModes['light desktop'],
+				'light leftCol': allModes['light leftCol'],
+				'light wide': allModes['light wide'],
+			},
+		},
+	},
+};
diff --git a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
index 42ccdbf8a9a..0e4c89cb674 100644
--- a/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
+++ b/dotcom-rendering/src/layouts/StandardLayoutArticleGrid.tsx
@@ -235,7 +235,7 @@ export const StandardLayoutArticleGrid = ({
 	const isImmersiveLandscape = layoutType === 'immersiveLandscape';
 	const isImmersive = isImmersivePortrait || isImmersiveLandscape;
 
-	const hasMinimumImageHeight =
+	const hasLabsPortraitImage =
 		isLabs && isImmersivePortrait && isMainMediaImage;
 
 	const ageWarning = getAgeWarning(
@@ -334,23 +334,19 @@ export const StandardLayoutArticleGrid = ({
 
 								${isImmersivePortrait &&
 								css`
-									${from.desktop} {
-										aspect-ratio: 4/5;
-									}
+									aspect-ratio: 4 / 5;
 								`}
 
 								${isImmersiveLandscape &&
 								landscapeImmersiveMediaBelowDesktop}
 
-								${hasMinimumImageHeight &&
+								${hasLabsPortraitImage &&
 								css`
 									${until.tablet} {
 										position: relative;
 										width: 100%;
 										min-width: 0;
-										min-height: 469px;
-										${mainMediaAspectRatio != null &&
-										`aspect-ratio: ${mainMediaAspectRatio.replace(':', ' / ')};`}
+										aspect-ratio: 4 / 5;
 										overflow: hidden;
 										background-color: ${headlineBackgroundImmersive};