Reports: Reduce Margins on Small Viewports

This commit is contained in:
Paul Sealock 2019-01-17 13:09:02 +13:00
parent a52fab85de
commit 0e01c98851
3 changed files with 18 additions and 6 deletions

View File

@ -11,6 +11,10 @@
@include breakpoint( '>960px' ) { @include breakpoint( '>960px' ) {
margin-top: 100px; margin-top: 100px;
} }
@include breakpoint( '<782px' ) {
margin-top: 60px;
}
} }
.woocommerce-layout .woocommerce-layout__main { .woocommerce-layout .woocommerce-layout__main {

View File

@ -20,6 +20,11 @@
.components-base-control__field { .components-base-control__field {
margin-bottom: 0; margin-bottom: 0;
} }
@include breakpoint( '<782px' ) {
margin: $gap 0;
border: 1px solid $core-grey-light-700;
}
} }
.woocommerce-filters-advanced__title-select { .woocommerce-filters-advanced__title-select {
@ -85,11 +90,14 @@
padding: 0 $gap-smallest; padding: 0 $gap-smallest;
@include breakpoint( '<782px' ) { @include breakpoint( '<782px' ) {
display: block;
margin: 0;
width: 100%; width: 100%;
padding: $gap-smallest 0; padding: $gap-smallest 0;
} }
@include breakpoint( '<400px' ) {
display: block;
margin: 0;
}
} }
display: flex; display: flex;
@ -187,9 +195,5 @@
.separator { .separator {
padding: 0 8px; padding: 0 8px;
@include breakpoint( '<782px' ) {
padding: 0;
}
} }
} }

View File

@ -13,6 +13,10 @@
@include breakpoint( '<1280px' ) { @include breakpoint( '<1280px' ) {
flex-direction: column; flex-direction: column;
} }
@include breakpoint( '<782px' ) {
margin-bottom: $gap;
}
} }
.woocommerce-filters-filter { .woocommerce-filters-filter {