Hello there,
I want to display categories on my articles page but even using documentations instructions for customizing css I seem unable to modify how my categories are displayed.
`.searchandfilter[data-sf-form-id=”2721″]
{
font-family: BatonTurboWeb-Medium;
font-size:18px;
}
Could you help me please
I would do something like this (but it might need to be inside a medai query to keep it applying to desktop only:
.searchandfilter[data-sf-form-id="13517"] {
margin: 0 65px;
}
.searchandfilter[data-sf-form-id="13517"] > ul > li {
min-width: 300px;
}
.searchandfilter[data-sf-form-id="13517"] > ul > li > label {
min-width: 260px;
}
300px is the smallest you can use for them to be the same width, with the data terms you have inside the fields, and font size.
.searchandfilter .sf-field-category h4 {
display: inline-block;
font-size: 18px;
}
.searchandfilter[data-sf-form-id="262"] .sf-field-category > ul {
display: inline-block;
margin-left: 10px;
}
The one in WPForms makes a shortcode [wpforms id=”5093″] but I am not sure how to include it in:
.searchandfilter[data-sf-form-id=”1428″]
{
//do stuff with this particular search form
}
Trevor,
I added a few snippets of CSS:
.searchandfilter[data-sf-form-id=”11564″]
{
font-size: 2em;
width: 600px !important;
}
I think I also tried:
.searchandfilter li.sf-field-search label,
.searchandfilter li.sf-field-search input {
width: 100%;
}
The CSS was a guess, but I couldn’t get it to work.
I also tried adjusting various elements with the Inspect tool with Chrome to no avail. Any ideas?
I’m using the Avada theme, which seems to interact with S&F unusually at times…
cheers,
JB
Hey there,
I just purchased the pliugin. I tried your custom css in both these 2 versions but it doesn’t work (also adding the !important attribute), any reason why?
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id=”9707″] > ul > li {
display: inline-block !important;
vertical-align: top;
padding: 0 20px;
}
This is the test page I built Test page
Thanks!
I haven’t checked this, but there are a couple of errors:
.searchandfilter[data-sf-form-id=”1216″] > ul
{
display: flex !important;
}
.sf-field-search {
flex-grow: 1 !important;
}
.sf-field-category,
.sf-field-tag,
.sf-field-reset {
flex-grow: 0 !important;
}
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
important was spelled wrong, and it is the ul inside the form that needs to be display: flex, not the form itself.
This reply has been marked as private.
Like this:
body.mybodytag .searchandfilter[data-sf-form-id="###"] > ul > li {
display: inline-block;
margin-right: 20px;
}
body.mybodytag .searchandfilter > ul > li:last-child {
margin-right: 0;
}
Ok, I just confirmed that my body class tags are different, so I will give it a try.
Can you tell me where the body class might go into this code snippet?
.searchandfilter[data-sf-form-id="###"] > ul > li {
display: inline-block;
margin-right: 20px;
}
.searchandfilter > ul > li:last-child {
margin-right: 0;
}
