- This topic has 1 reply, 2 voices, and was last updated 5 years, 6 months ago by
.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
These forums are now closed and remain for historical purposes.
None of the content applies to the new version 3. For support, get in touch via our contact form.
Forums › Forums › Search & Filter Pro › Adjust Mobile Styling
Trevor.
I’m looking for some guidance on fixing the mobile styling of the Search & Filter plugin on my site.
It’s on this page: https://www.welcominginternational.org/resource-library
You can see on mobile all the boxes stack on top of eachother without padding in between and they are not the same size. I’m looking to add say 10 pixels of spacing in between the boxes when they stack. I also want the Search, View Geographic Area, and View Topic boxes to be the same size. And I’d like all the boxes and the submit button to be left aligned. This is all mobile only. The plugin looks great on desktop!
This should start you off:
.entry-content .searchandfilter[data-sf-form-id="51428"] ul {
padding: 0;
}
@media (max-width: 980px) {
.searchandfilter[data-sf-form-id="51428"] li.sf-field-search,
.searchandfilter[data-sf-form-id="51428"] li[data-sf-field-input-type="select"],
.searchandfilter[data-sf-form-id="51428"] li > label,
.searchandfilter[data-sf-form-id="51428"] li > label > select,
.searchandfilter[data-sf-form-id="51428"] li.sf-field-search label input {
width: 100%;
}
.searchandfilter[data-sf-form-id="51428"] li {
margin-bottom: 20px;
}
}