My first attempt. Replace what you have:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
… with this:
.searchandfilter[data-sf-form-id="420"] ul {
padding-left: 0;
}
.searchandfilter[data-sf-form-id="420"] > ul > li > label,
.searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
min-width: 100%;
}
@media only screen and (max-width: 1024px) {
.searchandfilter[data-sf-form-id="420"] > ul > li {
min-width: 270px;
}
}
@media only screen and (min-width: 768px) {
.searchandfilter[data-sf-form-id="420"] > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px 20px;
min-width: 370px;
}
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-tipologia:before,
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-post-meta-comune:before {
content: "";
display: block;
height: 32px
}
}
@media only screen and (max-width: 767px) {
.searchandfilter[data-sf-form-id="420"] > ul > li > label,
.searchandfilter[data-sf-form-id="420"] > ul > li > label > select.sf-input-select,
.searchandfilter[data-sf-form-id="420"] > ul > li.sf-field-search > label > input {
min-width: 100%;
}
.searchandfilter[data-sf-form-id="420"] > ul > li[data-sf-field-input-type="range-slider"] > .meta-slider {
max-width: none;
margin-right: 10px;
}
}