Search Form Styling Thwarted

Anonymous

#209447

Trevor,

I have just added Search and Filter Pro to a graduate school website so people can search through the school’s alumni: https://www.balsillieschool.ca/graduates-2019/

The search functionality seems to be working reasonably well, but I’m having trouble changing the CSS of the search box itself (just below “See More Graduates”. I tried some of the other CSS snippets you suggested in this forum but none seemed to work. Any thoughts?

cheers,
Jacob

Trevor

#209457

Can you let me know which snippets you think are currently active but do not seem to work?

Anonymous

#209487

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

Trevor

#209536

I can see the CSS and it is active and working. However, the font-size of the search box, for example, is being set by your theme, thus:

input[type="text"] {
    color: #aaa9a9;
    font-size: 13px;
}

So this would override it:

.searchandfilter li.sf-field-search input[type="text"] {
  font-size: 2em;
}

Anonymous

#209603

Thanks, Trevor.
The CSS seems to be working – it’s just that my browser is picking it up erratically!

cheers,
JB

[Author]

Posts