Adjust CSS for the "Shop" title in the shop page

- Un-bolden title, align left, add horizontal rule to be in line
  with the theme.
- Adjust margins/paddings depending on the screen width.
This commit is contained in:
Nestor Soriano 2020-11-23 12:24:07 +01:00
parent c9b6481474
commit f50d383f2a
1 changed files with 34 additions and 9 deletions

View File

@ -341,11 +341,6 @@ a.button {
/** /**
* Shop page * Shop page
*/ */
.woocommerce-products-header__title.page-title {
font-size: 3rem;
text-align: center;
}
.woocommerce-result-count, .woocommerce-result-count,
.woocommerce-ordering { .woocommerce-ordering {
margin: 0 0 1rem; margin: 0 0 1rem;
@ -2146,6 +2141,12 @@ a.reset_variations {
.woocommerce-ordering { .woocommerce-ordering {
float: left; float: left;
clear: both; clear: both;
margin-top: 0px;
}
.woocommerce-result-count {
margin-top: 0px;
margin-bottom: 20px;
} }
} }
} }
@ -2436,10 +2437,6 @@ a.reset_variations {
/** /**
* Shop page * Shop page
*/ */
.woocommerce-products-header__title.page-title {
font-size: 4.2rem;
font-weight: 800;
}
.woocommerce-pagination { .woocommerce-pagination {
@ -2609,3 +2606,31 @@ a.reset_variations {
} }
} }
} }
@media only screen and (max-width: 768px) {
.woocommerce-products-header {
border-bottom: none !important;
padding-bottom: 0px;
margin-bottom: 0 !important;
}
}
@media only screen and (min-width: 600px) {
.woocommerce-products-header {
padding-bottom: 1.5vw;
}
.woocommerce-ordering,
.woocommerce-result-count {
margin-top: 0 !important;
}
}
@media only screen and (min-width: 690px) {
.woocommerce-products-header {
border-bottom: 3px solid var(--global--color-border);
}
}