diff --git a/components/ContentType/LoyaltyPage.tsx b/components/ContentType/LoyaltyPage.tsx index f66940761..1302a804f 100644 --- a/components/ContentType/LoyaltyPage.tsx +++ b/components/ContentType/LoyaltyPage.tsx @@ -11,7 +11,7 @@ export default async function LoyaltyPage() { const hasSidebar = !!loyaltyPage.sidebar.length return (
{hasSidebar && } diff --git a/components/ContentType/loyaltyPage.module.css b/components/ContentType/loyaltyPage.module.css index 54d62222f..12d7cc0db 100644 --- a/components/ContentType/loyaltyPage.module.css +++ b/components/ContentType/loyaltyPage.module.css @@ -13,7 +13,7 @@ } @media screen and (min-width: 950px) { - .withLeftSidebar { + .hasLeftSidebar { grid-template-columns: 30rem 1fr; } @@ -29,6 +29,9 @@ gap: 6.4rem; padding-left: 0; padding-right: 0; + } + + .hasLeftSidebar .blocks { grid-column: 2 / -1; } } diff --git a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css index 89982f38e..1d269dbda 100644 --- a/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css +++ b/components/Loyalty/Blocks/DynamicContent/OverviewTable/overviewTable.module.css @@ -1,14 +1,12 @@ .container { background-color: var(--Main-Brand-PalePeach); - left: 50%; margin-top: calc(var(--Spacing-x2) * -1); - margin-left: -50vw; - margin-right: -50vw; + margin-left: calc(var(--Spacing-x2) * -1); + margin-right: calc(var(--Spacing-x2) * -1); margin-bottom: calc( (var(--Spacing-x2) + 7.7rem) * -1 ); /* Based on the MaxWidth's 1.6rem + the LoyaltyPage's 7.7rem bottom margins */ position: relative; - right: 50%; width: 100dvw; padding: var(--Spacing-x2); display: grid; @@ -39,7 +37,6 @@ .mobileColumns { display: flex; flex-direction: column; - /* gap: var(--Spacing-x2); */ display: none; margin: 0 calc(var(--Spacing-x2) * -1); position: relative; @@ -121,7 +118,6 @@ bottom: 0; left: 0; right: 50%; - margin-left: calc(var(--Spacing-x2) * -1); z-index: 1; } @@ -134,23 +130,10 @@ margin-bottom: calc(var(--Spacing-x2) * -1); left: 50%; right: 0; - margin-right: calc(var(--Spacing-x2) * -1); z-index: 1; border-top-left-radius: var(--Corner-radius-Medium); } -.thirdColumn { - width: calc(100% / 3); - background-color: var(--Main-Brand-PalePeach); - position: absolute; - top: 0; - bottom: 0; - left: calc(100% / 3 * 2); - right: 0; - margin-left: calc(var(--Spacing-x2) * -1); - z-index: 1; -} - .levelSummary { display: flex; flex-direction: column; @@ -256,15 +239,8 @@ @media screen and (min-width: 950px) { .container { - left: auto; - right: auto; - margin-top: 0; - margin-bottom: 0; - margin-left: 0; - margin-right: 0; - width: auto; + margin: 0 calc(var(--Spacing-x3) * -1); } - .mobileColumns { display: none; } diff --git a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css index 9cba2379c..2aa2e099c 100644 --- a/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css +++ b/components/Loyalty/Blocks/DynamicContent/dynamicContent.module.css @@ -1,6 +1,7 @@ .container { display: grid; gap: 2.4rem; + /* These negative margins are needed for horizontally scrollable lists of cards */ margin-right: -1.6rem; padding-right: 1.6rem; } @@ -26,3 +27,10 @@ margin: 0; grid-area: subtitle; } + +@media screen and (min-width: 950px) { + .container { + margin-right: 0; + margin-left: 0; + } +}