From a92a94453b3e312fe98c5554f99a2e02ea5a6753 Mon Sep 17 00:00:00 2001 From: Juarez Mota Date: Fri, 27 Mar 2026 11:37:12 +0000 Subject: [PATCH 1/2] fix: standardize banner visual container styles across designable banner components Remove inconsistent margin and padding values, implement consistent flexbox centering, and consolidate tablet breakpoint styles. Apply identical styling to DesignableBanner, v2/Banner, and v2/BannerVisual components for visual consistency. --- .../designableBanner/DesignableBanner.tsx | 15 ++++++++---- .../banners/designableBanner/v2/Banner.tsx | 15 ++++++++---- .../v2/components/BannerVisual.tsx | 23 ++++++++++--------- 3 files changed, 34 insertions(+), 19 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx index 16c676c57d8..e8e78e89e02 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx @@ -888,16 +888,23 @@ const styles = { bannerVisualContainer: css` grid-area: main-image; - margin-left: ${space[2]}px; - margin-right: ${space[2]}px; + margin: 0; + padding: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; ${from.phablet} { max-width: ${phabletContentMaxWidth}; justify-self: center; } + ${from.tablet} { + height: 100%; + width: 100%; + } ${from.desktop} { - margin-top: ${space[6]}px; - padding-left: ${space[2]}px; justify-self: end; } ${between.desktop.and.wide} { diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx index bbb775ca593..f78f835cb67 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx @@ -178,16 +178,23 @@ const styles = { bannerVisualContainer: css` grid-area: main-image; - margin-left: ${space[2]}px; - margin-right: ${space[2]}px; + margin: 0; + padding: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; ${from.phablet} { max-width: ${phabletContentMaxWidth}; justify-self: center; } + ${from.tablet} { + height: 100%; + width: 100%; + } ${from.desktop} { - margin-top: ${space[6]}px; - padding-left: ${space[2]}px; justify-self: end; } ${between.desktop.and.wide} { diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx index eb8d01f3bb8..2012ea3f322 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { between, from, space } from '@guardian/source/foundations'; +import { between, from } from '@guardian/source/foundations'; import type { Image } from '@guardian/support-dotcom-components/dist/shared/types'; import type { ImageAttrs } from '../../../../shared/ResponsiveImage'; import { ResponsiveImage } from '../../../../shared/ResponsiveImage'; @@ -45,16 +45,23 @@ const getStyles = (isHeaderImage = false) => { container: css` grid-area: main-image; - margin-left: ${space[2]}px; - margin-right: ${space[2]}px; + margin: 0; + padding: 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; ${from.phablet} { max-width: 492px; justify-self: center; } + ${from.tablet} { + height: 100%; + width: 100%; + } ${from.desktop} { - margin-top: ${space[6]}px; - padding-left: ${space[2]}px; justify-self: end; } ${between.desktop.and.wide} { @@ -79,12 +86,6 @@ const getStyles = (isHeaderImage = false) => { padding-bottom: 0; } } - - ${from.tablet} { - height: 100%; - width: 100%; - align-items: center; - } `, }; }; From 91fc7530f81a50dfd1159814be0c80e3c4fdf9d0 Mon Sep 17 00:00:00 2001 From: Juarez Mota Date: Fri, 27 Mar 2026 12:53:34 +0000 Subject: [PATCH 2/2] fix: remove height constraint and add vertical margin to banner visual containers at desktop breakpoint Remove `height: 100%` from tablet breakpoint and add `margin: ${space[6]}px 0` at desktop breakpoint for visual container styling. Apply changes consistently across DesignableBanner, v2/Banner, and v2/BannerVisual components. --- .../marketing/banners/designableBanner/DesignableBanner.tsx | 2 +- .../marketing/banners/designableBanner/v2/Banner.tsx | 2 +- .../banners/designableBanner/v2/components/BannerVisual.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx index e8e78e89e02..75d05d935d8 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx @@ -901,10 +901,10 @@ const styles = { justify-self: center; } ${from.tablet} { - height: 100%; width: 100%; } ${from.desktop} { + margin: ${space[6]}px 0; justify-self: end; } ${between.desktop.and.wide} { diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx index f78f835cb67..ce948640820 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx @@ -191,10 +191,10 @@ const styles = { justify-self: center; } ${from.tablet} { - height: 100%; width: 100%; } ${from.desktop} { + margin: ${space[6]}px 0; justify-self: end; } ${between.desktop.and.wide} { diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx index 2012ea3f322..35aa765fd79 100644 --- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx +++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx @@ -1,5 +1,5 @@ import { css } from '@emotion/react'; -import { between, from } from '@guardian/source/foundations'; +import { between, from, space } from '@guardian/source/foundations'; import type { Image } from '@guardian/support-dotcom-components/dist/shared/types'; import type { ImageAttrs } from '../../../../shared/ResponsiveImage'; import { ResponsiveImage } from '../../../../shared/ResponsiveImage'; @@ -58,10 +58,10 @@ const getStyles = (isHeaderImage = false) => { justify-self: center; } ${from.tablet} { - height: 100%; width: 100%; } ${from.desktop} { + margin: ${space[6]}px 0; justify-self: end; } ${between.desktop.and.wide} {