Search form look in small device

Anonymous

#41510

I styled the search form to make it horizontal instead of vertical, but it doesn’t look good at all in a small device, see below:
http://dukes.chefrachida.com/recipes/

how can I style it to add some space between the fields.?
Thanks,
Rachida

Trevor

#41511

You would need to add custom css, there are plugins that can help you with this, such as so-css (free) or microthemer (paid). What you need is device specific css, which are called @media rules.

Anonymous

#41518

Thanks Trevor for your fast response, I have the microthemer toll I’m using it all the time and I even added these codes, few seconds after I published my question:
here is the CSS codes I wrote, but it is not working.

.sf-field-search {
width: 20px;
margin-bottom: 10px;
padding-bottom: 20px;
}

.sf-field-category {
width: 20px;
margin-bottom: 10px;
padding-bottom: 20px;
}

.sf-field-tag {
width: 20px;
margin-bottom: 10px;
padding-bottom: 20px;
}

But it is not working
Thanks,
Rachida

Trevor

#41525

Hi

Do you …

Want them:

all the same width or as they now are (different widths)
aligned left or centered

Anonymous

#41528

yes, I want them all with the same width and some space between them when they’re on the top of each other.
Thanks,
Rachida

Trevor

#41539

Custom CSS:

@media only screen and (max-width: 767px) {
  .searchandfilter > ul > li {
    margin-bottom: 30px;
  }
  .searchandfilter > ul > li select, .searchandfilter > ul > li input {
    width: 193px;
  }
  .searchandfilter > ul label {
    display: block !important;
  }
}

Anonymous

#41541

Trevore, thanks so much for the css codes. It works.

Trevor

#41543

Can I mark this as resolved and close the thread?

Anonymous

#41544

Absolutely you can close it and mark it resolved. I think it is a good idea to add these CSS codes in the documentation.
Thanks again for your prompt answer and your wonderful assistance.
Rachida

Trevor

#41545

We have a different plan for the styling issue.

[Author]

Posts