Forums › Forums › Search & Filter Pro › Search form look in small device

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Anonymous
    (Private)  April 4, 2016 at 2:18 pm #41510

    I styled the search form to make it horizontal instead of vertical, but it doesn’t look good at all in a small device, see below:
    http://dukes.chefrachida.com/recipes/

    how can I style it to add some space between the fields.?
    Thanks,
    Rachida

    Trevor
    (Private)  April 4, 2016 at 2:23 pm #41511

    You would need to add custom css, there are plugins that can help you with this, such as so-css (free) or microthemer (paid). What you need is device specific css, which are called @media rules.

    Anonymous
    (Private)  April 4, 2016 at 2:43 pm #41518

    Thanks Trevor for your fast response, I have the microthemer toll I’m using it all the time and I even added these codes, few seconds after I published my question:
    here is the CSS codes I wrote, but it is not working.

    .sf-field-search {
    width: 20px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    }

    .sf-field-category {
    width: 20px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    }

    .sf-field-tag {
    width: 20px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    }

    But it is not working
    Thanks,
    Rachida

    Trevor
    (Private)  April 4, 2016 at 3:10 pm #41525

    Hi

    Do you …

    Want them:

    all the same width or as they now are (different widths)
    aligned left or centered

    Anonymous
    (Private)  April 4, 2016 at 3:32 pm #41528

    yes, I want them all with the same width and some space between them when they’re on the top of each other.
    Thanks,
    Rachida

    Trevor
    (Private)  April 4, 2016 at 5:02 pm #41539

    Custom CSS:

    @media only screen and (max-width: 767px) {
  .searchandfilter > ul > li {
    margin-bottom: 30px;
  }
  .searchandfilter > ul > li select, .searchandfilter > ul > li input {
    width: 193px;
  }
  .searchandfilter > ul label {
    display: block !important;
  }
}
    Anonymous
    (Private)  April 4, 2016 at 5:23 pm #41541

    Trevore, thanks so much for the css codes. It works.

    Trevor
    (Private)  April 4, 2016 at 5:29 pm #41543

    Can I mark this as resolved and close the thread?

    Anonymous
    (Private)  April 4, 2016 at 5:34 pm #41544

    Absolutely you can close it and mark it resolved. I think it is a good idea to add these CSS codes in the documentation.
    Thanks again for your prompt answer and your wonderful assistance.
    Rachida

    Trevor
    (Private)  April 4, 2016 at 5:40 pm #41545

    We have a different plan for the styling issue.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)