Adjust Mobile Styling

Anonymous

#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

#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