diff --git a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss b/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss index ed67b7e..9587946 100644 --- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss +++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss @@ -22,4 +22,5 @@ flex: 1 1 290px; max-width: 290px; } + } diff --git a/src/app/features/store/pages/checkout-page/checkout-page.component.scss b/src/app/features/store/pages/checkout-page/checkout-page.component.scss index c533094..046e5c5 100644 --- a/src/app/features/store/pages/checkout-page/checkout-page.component.scss +++ b/src/app/features/store/pages/checkout-page/checkout-page.component.scss @@ -6,6 +6,15 @@ @media (max-width: 900px) { grid-template-columns: 1fr; + + .checkout-page__cart-col { + order: 1; + } + + .checkout-page__stepper-col, + .checkout-page__editing-notice { + order: 2; + } } &__stepper-col { diff --git a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss index e9b8c57..a53b953 100644 --- a/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss +++ b/src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss @@ -110,6 +110,7 @@ .payment-panel { min-width: 0; + &__card { width: 100%; max-width: 320px; diff --git a/src/app/shared/components/cart/cart.component.scss b/src/app/shared/components/cart/cart.component.scss index f38f1c5..fd8e176 100644 --- a/src/app/shared/components/cart/cart.component.scss +++ b/src/app/shared/components/cart/cart.component.scss @@ -87,3 +87,13 @@ display: flex; gap: 12px; } + +@media (max-width: 767.98px) { + .cart-actions { + flex-direction: column; + + ::ng-deep app-button { + width: 100%; + } + } +} diff --git a/src/app/shared/components/product-column-with-image/product-column-with-image.component.scss b/src/app/shared/components/product-column-with-image/product-column-with-image.component.scss index c2622ef..b91a41d 100644 --- a/src/app/shared/components/product-column-with-image/product-column-with-image.component.scss +++ b/src/app/shared/components/product-column-with-image/product-column-with-image.component.scss @@ -75,3 +75,9 @@ } } } + +@media (max-width: 767.98px) { + .product-column-with-image { + border-color: var(--color-primary, var(--tenant-primary, #009933)); + } +}