Forums › Forums › Search & Filter Pro › responsive search filter

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Anonymous
    (Private)  January 10, 2019 at 1:16 pm #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
    (Private)  January 10, 2019 at 2:08 pm #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
    (Private)  January 10, 2019 at 3:43 pm #198606

    sorry, it does not change anything!

    Trevor
    (Private)  January 10, 2019 at 4:06 pm #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
Viewing 4 posts - 1 through 4 (of 4 total)