Fix the broken layout of PaidAdsFeaturesSection for the smaller viewp…

…orts. Address #1650 (comment)
woocommerce · Aug 30, 2022 · 656aeb9 · 656aeb9
1 parent 8e72981
commit 656aeb9
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.js
@@ -103,7 +103,11 @@ export default function PaidAdsFeaturesSection( {
 		>
 			<Section.Card>
 				<Section.Card.Body>
-					<Flex align="center" gap={ 9 }>
+					<Flex
+						className="gla-paid-ads-features-section__content"
+						align="center"
+						gap={ 9 }
+					>
 						<FlexBlock>
 							<Section.Card.Title>
 								{ __(

diff --git a/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss b/js/src/setup-mc/setup-stepper/setup-paid-ads/paid-ads-features-section.scss
@@ -11,6 +11,13 @@
 		color: $gray-900;
 	}
 
+	@media (max-width: $break-small) {
+		&__content {
+			flex-direction: column;
+			gap: $grid-unit-20;
+		}
+	}
+
 	&__subtitle {
 		line-height: $gla-line-height-medium;
 		font-size: $gla-font-small;