Support Forums

1. You could set the Input Type to Radio and then use CSS to hide the radio button and to style the ‘buttons’. If you had a working page that you have made that I could see (a live link/URL) I could probably craft the CSS?

2. This is not easy. The buttons would need to load/unload CSS to make the grid appearance, and the PHP template for the results would have to be hand coded. I know of no way to do this, but it must be possible. That would be outside the scope of our support, sorry.

You have this CSS that is causing a problem (can you remove it?):

@media (min-width: 991px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 16.66666667%;
  }
}
@media (min-width: 768px) {
  .ct-shortcode .searchandfilter > ul > li {
    width: 33.33333333%;
  }
}

But, my attempt:

.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li.sf-option-active label {
  background-color: #7DA85B;
  color: #fff;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order input {
  display: none;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label:hover {
  background-color: #7DA85B;
  color: #fff;
  cursor: pointer;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order label {
  text-align: center;
  line-height: 1.4em;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 3px 5px !important;
  text-indent: 0;
}
.searchandfilter[data-sf-form-id="73587"] .sf-field-sort_order > ul > li {
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 10px;
}

A start at least, change as you need.