diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx index 6458e2928cd6..564fd2aa625b 100644 --- a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx +++ b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/filter.tsx @@ -69,27 +69,28 @@ export default function PlanSelectionFilter( { selectedPlan, plans, onSelectPlan return (
- +

{ translate( 'Filter by:' ) } - +

+
+ - - - + +
diff --git a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss index 18b89686aa65..c4f07fea7b0d 100644 --- a/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss +++ b/client/a8c-for-agencies/sections/marketplace/pressable-overview/plan-selection/style.scss @@ -112,6 +112,40 @@ align-items: center; justify-content: center; + + .pressable-overview-plan-selection__filter-label { + font-weight: 600; + font-size: 1rem; + margin: 0; + } + + .pressable-overview-plan-selection__filter-buttons { + button:first-child { + margin-inline-end: 1rem; + } + } + + @include breakpoint-deprecated( "<660px" ) { + display: block; + margin: 0; + text-align: center; + + .pressable-overview-plan-selection__filter-label { + width: 100%; + margin-block-end: 0.5rem; + } + + .pressable-overview-plan-selection__filter-buttons { + display: inline-flex; + justify-content: space-around; + width: 100%; + button { + width: 50%; + text-align: center; + justify-content: center; + } + } + } } .components-button.pressable-overview-plan-selection__filter-button { diff --git a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss index 93d60a18f2c8..dd7f11ffacb0 100644 --- a/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss +++ b/client/a8c-for-agencies/sections/marketplace/products-overview/product-card/style.scss @@ -88,6 +88,18 @@ button.product-card__select-button { width: 100%; justify-content: space-between; gap: 0.5rem; + + @include breakpoint-deprecated( "<660px" ) { + display: block; + + .product-card__select-button { + margin-block-start: 0.5rem; + width: 100%; + justify-content: center; + text-align: center; + font-size: 1rem; + } + } } .product-card__heading {