Question about filter width on responsive website

Anonymous

#245336

First of all, congratulations for this excellent plugin, really cool!!!
I created a set of filters for a real estate site. Everything works very well, only I would like, from the point of view of the style, that input areas widths were all the same but above all that their widths were dependent on the width of the large gray column inside which the shortcode was inserted.

Look at this page:

https://ricomincia.online/archivio-immobili/

In practice I would like that, by enlarging or narrowing the browser window, the input areas and the sliders also widened, keeping constant only the distance from the edge left and right (for example 10px). I hop to be understood with this sample:

https://apcomunicazione.s3.amazonaws.com/Varie/width.jpeg

I have tried to work with the percentage widths but I have not succeeded. At the moment a good visualization on the iPad I get it with these values:

===========================================================
/*Modifica Stile Configuratore*/
/*larghezza uguale delle tendine su tutte le righe*/
.searchandfilter select.sf-input-select {
min-width: 200px;
max-width: 200px;
font-size: 15px;
}
/*altezza dei titoletti dei selettori*/
.searchandfilter h4 {
margin: 0;
padding: 5px 0 10px;
font-size: 20px;
}
/*modifica della larghezza dei selettori a slider*/
.searchandfilter .meta-slider {
margin-top: 10px;
margin-bottom: 10px;
height: 15px;
max-width: 190px;
}
/*modifica di font e padding delle aree di input*/
.searchandfilter .sf-range-max, .searchandfilter .sf-range-min {
max-width: 70px;
font-size: 15px;
padding: 3px;
}
===========================================================

But it’s no perfect…
OK, that’s all, I hope you’ll help me.
Thanks in advance!

Alessio

Trevor

#245429

It took quite a while to make, but try this custom CSS:

.searchandfilter[data-sf-form-id="1628"] ul {
  margin-left: 0;
}
.searchandfilter[data-sf-form-id="1628"] > ul {
  padding: 0 10px;
  width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li,
.searchandfilter[data-sf-form-id="1628"] > ul > li label,
.searchandfilter[data-sf-form-id="1628"] > ul > li label input,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
  width: 100%;
}
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="range-slider"] label,
.searchandfilter[data-sf-form-id="1628"] > ul > li[data-sf-field-input-type="checkbox"] li label {
  width: auto;
}
.searchandfilter[data-sf-form-id="1628"] .meta-slider,
.searchandfilter[data-sf-form-id="1628"] > ul > li label select.sf-input-select {
  max-width: none;
}

Anonymous

#245452

WOW!!! As you used to say “it works like a charm”:-))))
You are a real genius!
Thanks a lot, now the page is PERFECT:

https://apcomunicazione.s3.amazonaws.com/Varie/facet01.jpeg
https://apcomunicazione.s3.amazonaws.com/Varie/facet02.jpeg

Well, I think you should add this parameter (something like “pixel from edge”) on future version of this marvelous plugin.

Thanks again!
Alessio

Trevor

#245460

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts