diff --git a/plugins/woocommerce-admin/client/layout/style.scss b/plugins/woocommerce-admin/client/layout/style.scss index 120189e20bd..0197b3b0fc0 100644 --- a/plugins/woocommerce-admin/client/layout/style.scss +++ b/plugins/woocommerce-admin/client/layout/style.scss @@ -11,6 +11,10 @@ @include breakpoint( '>960px' ) { margin-top: 100px; } + + @include breakpoint( '<782px' ) { + margin-top: 60px; + } } .woocommerce-layout .woocommerce-layout__main { diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss index 9ec4f9f72bf..0d1775c99dd 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss @@ -20,6 +20,11 @@ .components-base-control__field { margin-bottom: 0; } + + @include breakpoint( '<782px' ) { + margin: $gap 0; + border: 1px solid $core-grey-light-700; + } } .woocommerce-filters-advanced__title-select { @@ -85,11 +90,14 @@ padding: 0 $gap-smallest; @include breakpoint( '<782px' ) { - display: block; - margin: 0; width: 100%; padding: $gap-smallest 0; } + + @include breakpoint( '<400px' ) { + display: block; + margin: 0; + } } display: flex; @@ -187,9 +195,5 @@ .separator { padding: 0 8px; - - @include breakpoint( '<782px' ) { - padding: 0; - } } } diff --git a/plugins/woocommerce-admin/packages/components/src/filters/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/style.scss index 7d3b5f52dae..a33b434e36b 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filters/style.scss @@ -13,6 +13,10 @@ @include breakpoint( '<1280px' ) { flex-direction: column; } + + @include breakpoint( '<782px' ) { + margin-bottom: $gap; + } } .woocommerce-filters-filter {