form fields horizontally on two lines

Anonymous

#242674

Hello,
I would like to know which CSS code to use to align the form fields horizontally on two lines.
the fields of the second row aligned with those of the first.
and how to make the input fields more subtle
thanks

Trevor

#242677

You may have to use custom CSS to split the form into columns.

Are you able to send me a live link/URL to your search page so I can take a look?

I am not sure what you mean by ‘more subtle’. My guess is you want to change the styling. Are you able to show me a form that is more as you want it to look?

Anonymous

#242678

http://www.boozenetwork.it/immobiliare/immobili/

I would like this

http://www.dibattistaimmobiliare.com/r/annunci/vendita-.html?Codice=&Tipologia%5B%5D=0&Motivazione%5B%5D=1&Provincia=0&Comune=0&Prezzo_da=&Prezzo_a=&Totale_mq_da=&Totale_mq_a=&cf=yes

thank you

Trevor

#242800

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;
  }
}

Anonymous

#242812

Perfect thank you

Trevor

#242940

Thanks for letting me know. I will close this thread for now.

[Author]

Posts