Forums › Forums › Search & Filter Pro › Change values with css?
- This topic has 15 replies, 2 voices, and was last updated 4 years, 8 months ago by Trevor.
-
Trevor(Private) February 24, 2020 at 11:34 am #234694
Are you able to send me a live link/URL to your search page so I can take a look?
Any annotated screenshots (of what you want) you can make to help me would be appreciated. You will need to upload images to an external file sharing site, like dropbox, and share the link(s) with me.
Anonymous(Private) February 25, 2020 at 2:08 am #234786We have done this to align it on the page:
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}And this to change the size of “search” and “submit”:
.searchandfilter[data-sf-form-id=”9080″] .sf-field-search input {
color: #000;
padding: 10px 10px;
font-family: “Raleway”;
background: #eee;
font-size: 16px;
}
.searchandfilter[data-sf-form-id=”9080″] .sf-field-submit input {
color: #fff;
font-size: 16px;
font-family: “Raleway”;
padding: 10px 10px;
background: #1890ff
}Regards
Trevor(Private) February 25, 2020 at 2:30 pm #234833Does this look better:
.searchandfilter[data-sf-form-id="9080"] > ul > li:first-child { margin-left: 0; } .searchandfilter[data-sf-form-id="9080"] > ul > li { margin-left: 20px; float: left; } .searchandfilter[data-sf-form-id="9080"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="9080"] select { color: black; font-family: "Raleway", Sans-serif; font-size: 16px; background: #eee; padding: 9px; border-radius: 6px; } .searchandfilter[data-sf-form-id="9080"] select, .searchandfilter[data-sf-form-id="9080"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="9080"] > ul { display: table; margin: 0 auto; }
Replace/remove this:
.searchandfilter > ul > li { display: inline-block; vertical-align: top; padding: 0 20px; }
And I think you need to add the 6px border-radius to the text search field. In the code you already have:
.searchandfilter[data-sf-form-id="9080"] .sf-field-search input { color: #000; padding: 10px 10px; font-family: "Raleway"; background: #eee; font-size: 16px; border-radius: 6px; }
Trevor(Private) February 27, 2020 at 2:00 pm #235073Change this:
.searchandfilter[data-sf-form-id="10033"]>ul { display: table; margin: 0 auto; }
to this:
.searchandfilter[data-sf-form-id="10033"]>ul { display: table; margin: 0 auto; padding-left: 0; }
In order to do different CSS for mobile, what I gave you (and what you changed it to, for now, will need wrapping in a media query, like this:
@media only screen and (min-width: 1025px) { /* code here */ }
THEN I can start to look at the mobile version. Let me know when you have made this one CSS padding addition and the change to add the media query?
-
AuthorPosts