Forums Forums Search & Filter Pro Change values with css?

Tagged: ,

Viewing 6 posts - 11 through 16 (of 16 total)
  • Anonymous
    #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
    #235099

    Does 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
    #235245

    Ei 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
    #235320

    Change 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.

    Anonymous
    #235490

    thanks trevor, it’s great !!!
    Great friend.

    If you want you can close the topic.
    Hugs

    Trevor
    #235497

    Thanks for letting me know. I will close this thread for now.

Viewing 6 posts - 11 through 16 (of 16 total)