Live Filter – show checkboxes and radio buttons horizontally in rows & columns

To show Live Filter checkboxes and radio buttons in rows and columns (instead of vertical list), please add this code to Custom CSS field (the left textarea) in Content Views >> Settings page:

/* Live Filter - show checkboxes & radio buttons horizontally in rows, columns */
.cvp-live-filter, .cvp-live-filter label {
    display: block !important;
}

.cvp-live-filter .checkbox, .cvp-live-filter .radio {
    display: inline-block;
    width: 33%;
}

/* on mobile */
@media (max-width: 768px) {
    .cvp-live-filter .checkbox, .cvp-live-filter .radio {
        width: 50% !important;
    }
}

Please replace 33% by another value (for example: 25%) to change the number of columns.

Notice:

To use above styles for specific View only, please replace

.cvp-live-filter

with

.cvp-live-filter[data-sid="VIEW_ID"]

(replace VIEW_ID with ID of your View)

Best regards,

Scroll to Top