You will need to use custom CSS, such as:
.searchandfilter[data-sf-form-id="8759"] ul {
padding: 0;
}
.searchandfilter[data-sf-form-id="8759"] > ul {
padding: 20px;
}
.searchandfilter[data-sf-form-id="8759"] .sf-date-prefix {
min-width: 45px;
}
.searchandfilter[data-sf-form-id="8759"] h4 {
color: green;
/* font-size: 24px; */
/* font-weight: 700; */
}
I have commented out two lines, to show how to change font size and weight. You could also change font here. This will give you some ideas I think, but if you need more help, can you tell me what specifically needs to change and to what?
The fonts are all inherited from your theme.
Remove this custom CSS you already used:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
Replace that with this custom CSS:
@media (min-width: 768px) {
.searchandfilter[data-sf-form-id="36"] .sf-field-reset:before {
content: "";
display: block;
height: 12px;
}
.searchandfilter[data-sf-form-id="36"] > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px 0 0;
}
.searchandfilter[data-sf-form-id="36"] > ul > li:last-child {
padding: 0;
}
}
@media (max-width: 768px) {
.searchandfilter[data-sf-form-id="36"] li {
text-align: center;
}
.searchandfilter[data-sf-form-id="36"] > ul > li {
padding: 0;
}
.searchandfilter[data-sf-form-id="36"] .sf-field-reset {
padding-top: 11px;
}
}
You may need to adjust the numbers slightly to meet your needs.
This should start you off:
.entry-content .searchandfilter[data-sf-form-id="51428"] ul {
padding: 0;
}
@media (max-width: 980px) {
.searchandfilter[data-sf-form-id="51428"] li.sf-field-search,
.searchandfilter[data-sf-form-id="51428"] li[data-sf-field-input-type="select"],
.searchandfilter[data-sf-form-id="51428"] li > label,
.searchandfilter[data-sf-form-id="51428"] li > label > select,
.searchandfilter[data-sf-form-id="51428"] li.sf-field-search label input {
width: 100%;
}
.searchandfilter[data-sf-form-id="51428"] li {
margin-bottom: 20px;
}
}
Try adding this to the customizer Addtional CSS (Appearance -> Customize):
.searchandfilter[data-sf-form-id="7246"] > ul > li > label > select {
visibility: hidden;
}
This CSS should get you started:
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical input {
display: none;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label {
text-align: center;
width: 2.2em;
line-height: 1.4em;
border: 2px solid #666;
padding: 3px;
text-indent: 0;
border-radius: 5px;
}
.searchandfilter[data-sf-form-id="1052"] ul {
padding-left: 0;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical > ul > li {
display: inline-block;
margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical {
display: block;
}
.searchandfilter[data-sf-form-id="1052"] .sf-field-taxonomy-alphabetical label:hover {
cursor: pointer;
}
.searchandfilter[data-sf-form-id="1052"] .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #666;
}
I can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:
.searchandfilter[data-sf-form-id="5562"] .sf-input-select:not(.nice-select) {
display: inline-block !important;
}
.searchandfilter[data-sf-form-id="5562"] .sf-input-select.nice-select {
display: none;
}
There are many snippets in the forum. See this search:
https://support.searchandfilter.com/forums/search/searchandfilter+data+sf+form+id+%7B+%7D/
Use ones that generally look like this (your ID number instead of 1234):
.searchandfilter[data-sf-form-id="1234"] {
There isn’t a guide as such, but there are many snippets in the forum. See this search:
https://support.searchandfilter.com/forums/search/searchandfilter+data+sf+form+id+%7B+%7D/
Use ones that generally look like this (your ID number instead of 1234):
.searchandfilter[data-sf-form-id="1234"] {
AnonymousInactive
I know this question has been asked many times before. I’ve tried to implement the solutions I’ve found and have been unable to get it to work. I’m using a child theme of Astra with WP Bakery. Everything is at the latest version.
On NovaScotiaFood.com I have a search form here. I want it to be horizontal.
I can get it to work in Inspector simply by going to the first li element and changing display to inline-block. But it doesn’t work when I input the CSS via Customizer. I have also tried adding it to my stylesheet via FTP. I am using Siteground Optimizer caching and Cloudflare. The SG cache has been cleared repeatedly and Cloudflare has been put in development mode. I have tried a hard refresh of the browser numerous times too (I’m in Chrome).
I’ve tried the following bits of CSS:
#search-filter-form-2018 > ul > li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id="2018"] {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
.searchfilter ul li {
list-style: none!important;
display: inline-block!important;
padding: 0 20px;
}
None of these are working. Can you please help?
It is this CSS doing that:
.searchandfilter[data-sf-form-id="2839"] .sf-field-submit::before {
content: "";
display: block;
height: 43px;
width: 25px;
}
.searchandfilter[data-sf-form-id="2839"] .sf-field-reset::before {
content: "";
display: block;
height: 43px;
width: 25px;
}
You need to make that CSS conditional so it applies only to the horizontal form. For example, you could add a class to the Element in the Elementor widget settings and precede it with that on the horizontal version, so it then will not apply to the vertical version.
