Template for the filterbox or align the filter options in other way

[bbb]

Hi!
I love the filter option. For the listings page I’ve put the search box on the top of the page. Beneath the search box is the filter box and on the bottom of the page I have the listings in 3 or 4 columns.

The problem is that the filter box has one filter option per row so it takes a huge amount of space on the page. Is it possible to change the alignement and the size of the filter options so it looks more like the attached picture of the filter box for the community forum?

Thank you for an awesome plugin! I love it!

With best regards,

bbb

You community forum page filter box:

[ihor]

Yes, depending on how you moved the filters form to the top, it may be possible via a simple CSS code snippet, e.g. to set 2 columns for fields.

[bbb]

The search box is on the top and under that I’ve put the filter box. Is it also possible to make it 3 columns? How do I do that? I’ve used the template function built in to the plugin for the Listings.

Thank you for such a great customizable plugin!

With best regards,

bbb

[yevhen]

Please try this CSS snippet to set listing filter form fields in 3 columns, but please note that it can require further customization. If you are not familiar with the code customization then please consider hiring someone for custom work https://fvrr.co/32e7LvY

.hp-form--listing-filter .hp-form__fields{
	display: flex;
}

.hp-form--listing-filter .hp-form__fields .hp-form__field{
	flex-basis: 32%;
}

[bbb]

Hi again and thank you so much for your answer!

This is my solution to have a little bit of space between the attributes and also to have only one column on mobile devices:

@media screen and (min-width: 800px) {
.hp-form--listing-filter .hp-form__fields{
	display: flex;
	justify-content: space-between;
}
.hp-form--listing-filter .hp-form__fields .hp-form__field {
	flex-basis: 30%;
}
}

Once again, thank you so much!

With best regards,

bbb