Change values with css?

Carlos Miguel

#234691

Good morning

I’m going crazy, please tell me how to change the S&F module search fields, Background and size (the fields do not have the same height), borders, these things, I’ve been reading the blog for three days.
Thanks for your time.

Add New Note to this Reply

Trevor Moderator

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

Add New Note to this Reply

Carlos Miguel

#234784

This reply has been marked as private.

Add New Note to this Reply

Carlos Miguel

#234786

We 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

Add New Note to this Reply

Trevor Moderator

#234833

Does 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;
}

Add New Note to this Reply

Trevor Moderator

#234837

I edited that code a bit a few times, so check the post on the forum! Not in the email.

Add New Note to this Reply

Carlos Miguel

#234890

Hey Trevor, the code was great, though, do not use “padding” use “height” so we managed to match the size of everything.

Add New Note to this Reply

Carlos Miguel

#234892

Now I just have to correct two problems.
On the computer it is not entirely centered and in the mobile neither.

I send you photos

Add New Note to this Reply

Carlos Miguel

#234894

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#235073

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

Add New Note to this Reply

[Author]

Posts