Dropdown Field Spacing Question

Anonymous

#120798

Hi,
How do I reduce the spacing between the the headings of my dropdowns and my dropdown fields? Also, how do I reduce the spacing between dropdown fields? The S&F form is used via a shortcode for one page and via woocommerce shop on another. Thanks and your help is greatly appreciated.

Ron

Trevor

#120821

Hi

If you can give me live links/URLs to the two pages with the search form on, and make screenshots of them and annotate them as to what you want changing, upload those images to a file sharing site (like Cloudup) and share the links with me?

Anonymous

#120827

This reply has been marked as private.

Trevor

#120889

OK, the gap between them is mainly made with two elements that I can see when using the browser inspector. On the heading there is some bottom padding, and in the dropdown select some top margin. The CSS that sets these looks like this respectively:

.searchandfilter h4 {
  padding: 5px 0 10px;
}

(the 10px is the bottom setting) and

.widget select {
  margin-top: 13px;
}

And to respectively reset these:

.widget .searchandfilter h4 {
  padding-bottom: 1px;
}

and

.widget .searchandfilter select {
  margin-top: 1px;
}

You can change the values as you need or set them to 0 (no units needed for 0 values). If the gap between the dropdown select and the next field title is too great, then you can add padding-top and margin-bottom respectively to those two snippets.

It is hard to be precise, as your CSS is combined and minified for performance (making developing harder).

Anonymous

#120973

Thanks Trevor!

However the change you recommended didn’t work. Before reaching out to you I tried:

.searchandfilter ul li {
padding-top: 5px;
padding-bottom: 5px;
}

And that reduced the spacing between the first header titled ‘sort results by’ and the search bar above it. However I’m not sure how to create the same results for the drop downs and headers below that first one.

I thought your code above would work but it didn’t. Do you have any other suggestions?

Trevor

#120998

It may be different across browsers. Maybe you need to add !important, like this:

margin-top 1px !important;

Anonymous

#121125

This reply has been marked as private.

Trevor

#121176

Most odd. When I view the page in the Inspector in Firefox, they are not there (the <p>‘s or <br>‘s). When I look at the page source code, they are not there either. That means that your browser must be adding them? Did you try another browser on your computer?

I suppose that you could give them some custom CSS, like this:

.searchandfilter label br {
  height: 0;
  line-height: 0;
}

or maybe

.searchandfilter label br {display: none;}

Anonymous

#121242

Thanks Trevor!

The main piece that cleaned up the formatting was:
.searchandfilter label br {display: none;}

Then I also used the following like you recommended to clean up some additional formatting:

.searchandfilter ul li {
  padding-top: 1px;
  padding-bottom: 1px;
}

.widget li {
  line-height:10px;
}

.searchandfilter p {
  margin-top: 1px;
  margin-bottom: 1px;
}

.widget select {
  margin-top: 1px;
  margin-bottom: 1px;
}

I appreciate all the help!

[Author]

Posts