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.
-
Anonymous(Private) February 27, 2020 at 2:26 pm #235079
ohhh!!! just do it Trevor, only Just need to justify the mobile versions, and “color submit”in ios.
I have divided it.
1. justification/ * ------ online and focused adsforchange search forms ------ * / @media only screen and (min-width: 1025px) { .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } }
So I managed not to lose the color design of the fields.
2. Design:
/ * ------ forms search adsforchange color ------ * / .searchandfilter[data-sf-form-id = "10033"] .sf-field-search input { color: # 000; height: 40px; font-family: "Raleway", Sans-serif; background: #eee; font-size: 16px; border-radius: 4px; } .searchandfilter[data-sf-form-id = "10033"] select { color: black; font-family: "Raleway", Sans-serif; font-size: 16px; background: #eee; border-radius: 4px; height: 40px; } .searchandfilter[data-sf-form-id = "10033"] .sf-field-submit input { color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba (0, 0, 0, 0.3)! important; }
Trevor(Private) February 27, 2020 at 3:57 pm #235099Does this work?
.searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } @media only screen and (min-width: 1025px) { .searchandfilter[data-sf-form-id="10033"] > ul > li: first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { margin: 0 auto; display: table; } }
Note, the iPhone takes over control of the button, so I am unsure how to change that.
Anonymous(Private) February 29, 2020 at 9:40 am #235245Ei Trevor!!
It worked to focus on the mobile and match the size of the fields.
To cancel the “ios” button I used this:-webkit-appearance: none; -webkit-border-radius: 0;
So my code has been like this:
/*------formularios busqueda adsforchange en linea y centrado------*/ .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } @media only screen and (min-width: 1025px) {.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; padding-left: 0; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { display: table; margin: 0 auto; padding-left: 2; } .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { -webkit-appearance: none; -webkit-border-radius: 0; color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3) } }
I only have one thing left …
As you can see on mobile devices, it is not completely centered, but has a margin to the left.
I’ve tried everything, but I can’t keep it completely focused. Do you recommend something to me? I have to turn to you.Thanks a million for your time.
Trevor(Private) March 2, 2020 at 1:51 pm #235320Change it to this:
/*------formularios busqueda adsforchange en linea y centrado------*/ .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { padding-left: 0; } @media only screen and (min-width: 1025px) {.searchandfilter[data-sf-form-id="10033"] > ul > li:first-child { margin-left: 0px; } .searchandfilter[data-sf-form-id="10033"] > ul > li { margin-left: 10px; float: left; } .searchandfilter[data-sf-form-id="10033"] { float: left; width: 100%; } .searchandfilter[data-sf-form-id="10033"] select, .searchandfilter[data-sf-form-id="10033"] .sf-field-search input { min-width: 240px; } .searchandfilter[data-sf-form-id="10033"] > ul { display: table; margin: 0 auto; } } @media only screen and (max-width: 1024px) { .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { display: table; margin: 0 auto; padding-left: 2; } .searchandfilter[data-sf-form-id="10033"] .sf-field-submit input { -webkit-appearance: none; -webkit-border-radius: 0; color: #fff; height: 40px; font-family: "Raleway", Sans-serif; background: #1890ff; font-size: 16px; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3) } }
This moves the
padding-left: 0;
that was inside the media query to outside it, so it also applies to mobile. -
AuthorPosts