Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Adjust Mobile Styling

Viewing 2 posts - 1 through 2 (of 2 total)
  • Welcoming International
    (Private)  June 19, 2020 at 4:29 am #249395

    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!

    Trevor Moderator
    (Private)  June 19, 2020 at 11:13 am #249415

    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;
  }
}
  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

The forum ‘Search & Filter Pro’ is closed to new topics and replies.