diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf21e0b926..d9d71fded0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
## Upcoming version 2018-11-XX
+* [fix] PriceFilter styles
+ [#954](https://github.com/sharetribe/flex-template-web/pull/954)
+
## v2.3.1 2018-11-16
* [fix] Don't set currentUserHasListings if fetched listing is in draft state.
diff --git a/src/components/PriceFilter/PriceFilterPlain.css b/src/components/PriceFilter/PriceFilterPlain.css
index 1fae6d29c8..15239cd2e7 100644
--- a/src/components/PriceFilter/PriceFilterPlain.css
+++ b/src/components/PriceFilter/PriceFilterPlain.css
@@ -34,6 +34,10 @@
cursor: pointer;
}
+.formWrapper {
+ padding-left: 20px;
+}
+
.clearButton {
@apply --marketplaceH5FontStyles;
font-weight: var(--fontWeightMedium);
diff --git a/src/components/PriceFilter/PriceFilterPlain.js b/src/components/PriceFilter/PriceFilterPlain.js
index 89711b2299..560a652ef6 100644
--- a/src/components/PriceFilter/PriceFilterPlain.js
+++ b/src/components/PriceFilter/PriceFilterPlain.js
@@ -73,20 +73,22 @@ class PriceFilterPlainComponent extends Component {
- {
- this.filterContent = node;
- }}
- min={min}
- max={max}
- step={step}
- liveEdit
- isOpen={this.state.isOpen}
- />
+
+
{
+ this.filterContent = node;
+ }}
+ min={min}
+ max={max}
+ step={step}
+ liveEdit
+ isOpen={this.state.isOpen}
+ />
+
);
}
diff --git a/src/forms/PriceFilterForm/PriceFilterForm.css b/src/forms/PriceFilterForm/PriceFilterForm.css
index 3d9aea457e..adaafd09c5 100644
--- a/src/forms/PriceFilterForm/PriceFilterForm.css
+++ b/src/forms/PriceFilterForm/PriceFilterForm.css
@@ -106,7 +106,13 @@
}
.priceSeparator {
- margin: 0 8px;
+ margin: 4px 8px 0 8px;
+}
+
+@media (--viewportMedium) {
+ .priceSeparator {
+ margin: 2px 8px 0 8px;
+ }
}
.sliderWrapper {