responsive search filter

Anonymous

#198597

good morning,
congratulations for the filter is wonderful !!!
I need to make the “compact” filter in the smartphone.
In the desktop and tablet is fine as you can see: link

in the smartphone I would like the fields to be two by line.
See:
can you help me ?

thank you

Trevor

#198600

You would probably need to use the CSS shown here:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

… but surround it it with a media query to restrict to screen sizes to whatever mobile breakpoint your theme is set to, e.g 767px. Like this:

@media only screen and (max-width: 767px) {
  .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Anonymous

#198606

sorry, it does not change anything!

Trevor

#198611

Try this:

@media only screen and (max-width: 767px) {
  .searchandfilter > ul > li {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px 0 0;
    margin-bottom: 10px;
  }
  .searchandfilter ul {
    margin-left: 0;
    margin-right: -10px;
  }
}

BUT, bear in mind that it will still go to one column if the screen is too narrow.

[Author]

Posts