Search Results for '.searchandfilter custom css'

[Trevor]

The Custom CSS in this post may either directly help, or give you some ideas:

https://support.searchandfilter.com/forums/topic/how-to-make-the-search-fields-display-in-line-or-streamlined/#post-123476

[Trevor]

Try this custom CSS, which will reduce all the vertical gaps:

.widget-container .searchandfilter label br {
  display: none;
}
.widget-container .searchandfilter select,
.widget-container .searchandfilter input {
  margin-bottom: 0;
}
.widget-container .searchandfilter p {
  margin-bottom: 0;
  margin-top: 0;
}

You can play with those if that is too much!!

There is not enough room to place the filters side by side on a desktop site.

[Trevor]

OK

The reason why the elements are far apart is this Custom CSS that you have:

.searchandfilter > ul > li {
    display: inline-block;
    margin-right: 100px;
    float: left;
}

(the margin-right line)

If you reduce that, they get closer together, but they are left aligned. Is that what you want?

[Trevor]

Most odd. When I view the page in the Inspector in Firefox, they are not there (the <p>‘s or <br>‘s). When I look at the page source code, they are not there either. That means that your browser must be adding them? Did you try another browser on your computer?

I suppose that you could give them some custom CSS, like this:

.searchandfilter label br {
  height: 0;
  line-height: 0;
}

or maybe

.searchandfilter label br {display: none;}

[Trevor]

I just replied to another of your threads, but here you give me some more information, so I can first direct you to this post:

https://support.searchandfilter.com/forums/topic/divi-blog-module-grid/#post-99184

Note that the Ajax container will vary according to whether you use a grid or a list view.

Secondly, as to the CSS, you would have to add Custom CSS to style the search form itself. If you search for the key words horizontal CSS you will find some snippets on this forum, but I can help with fine tuning it. All I would need are olive pages with what you have and what you want to to resemble.

[Trevor]

Your theme appears to include Visual Composer, so you might want to use our free Visual Composer addon. That grid you show is using Masonry, so you would need to use the Visual Composer Post Masonry element. This post explains more:

https://support.searchandfilter.com/forums/topic/pagination-not-working-11/#post-105228

You may need to make your own grid design using their grid builder, and it may need some custom CSS, but it is possible.

[Trevor]

How about this Custom CSS:

.searchandfilter .sf-field-category .sf-level-0 > input {
  display: none;
}

[Trevor]

You would need to write your own Custom CSS for this.

I wrote this for someone on the forum recently, for the submit button:

.searchandfilter input[type="submit"] {
  border: 1px solid #ddd;
  border-radius: 3px;
  color: #fff;
  background: #ddd;
  font-size: 14px;
  padding: 0.7em;
  line-height: 16px;
  cursor: pointer;
  color: #666;
  text-align: center;
  margin-top: 44px;
  font-weight: 700;
}

But it gives you an idea. The browser inspector is your friend, which allows you to experiment with CSS and see what other controls on your site are using.

[Trevor]

This would typically require custom CSS, and so being able to see a live link/URL would help, but the core CSS would look like this:

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

[Trevor]

Apologies for the delay in responding. Your last reply arrived after we closed our support for the weekend (our normal support hours are Monday – Friday 10am – 5pm GMT) and Monday was a national holiday in the UK.

You appear to have 3 different forms on the page. ID numbers 1901, 1904, 1905 and 1906.

Why do you not have these all in one form? As it is, in separate forms, it will not work.

Is it because you want the fields horizontal? In which case Custom CSS like this would perhaps start to make this for you:

.searchandfilter > ul > li {
  display: inline-block;
  margin-right: 20px;
  float: left;
}
.searchandfilter > ul > li:last-child {
  margin-right: 0;
}
.search-filter-results {clear: both;}

Also, I see that you are using Visual Composer. We have a beta addon for Visual Composer. You can download and install this free addon plugin:

https://www.dropbox.com/s/t4gnvhr8mj7e52d/search-filter-pro-vc-beta-2.zip?dl=0

Then, in the Search & Filter form settings, for Display Results method, select Visual Composer Grid.

In the page, use Visual Composer to design the page. You will find a new element for our Search Form (it has a blue icon).

For the results, select one of the Visual Composer grids, such as the (orange icon) Post Grid.

In the settings for that, as the Data Source select Search & Filter

Then select the form in the next option box. Then select grid type (posts per row) and Pagination.

In the design part, either select a pre-defined grid, or design/build one of your own with the grid builder.