Just a few problems with visualization

[MohrlojaParticipant]

Hello,

i have a few problems which i don’t know how to solve. I have a few posts in different subcategories of one main category. Now i want to filter them for the subcategoeries. At the moment it looks like this:
https://www.earningpeople.com/geld-verdienen/freelancer/
My first problem is, i can’t activate the drop-down-menu for this filter. There are just checkboxes available for the categorie filter.
The second problem is, the result-boxes should have a bigger width and i can’t find the option to fix that. Also they should not displayed as slider. I want them in more rows and columns and all results with the same height, like a grid.
And is it possible to hide or rename the text “Filter by”?

I hope my english is good enough to understand my issues.

Thank you very much in advance.

Bes regards
Jan Mohrlok

[Ernest MarcinkoKeymaster]

Hi Jan,

Can you please check the URL you have sent? It leads me to a ‘page not found 404’ error page. Thank you!

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[MohrlojaParticipant]

Hey,

yeah i’m sorry. Here is the right URL
https://www.earningpeople.com/verdienen/freelancer/

Best regards
Jan Mohrlok

[Ernest MarcinkoKeymaster]

Hi Jan,

Thanks! I see you managed to change the filter layout to a drop down.

The horizontal layout you currently use does not support a multi row layout, only as a slider, similarly to the vertical layout.
However with a custom CSS you might be able to achieve that the scrollbar never actually activates and the items will wrap into lines:

div.ajaxsearchpro .mCSBap_horizontal.mCSBap_inside > .mCSBap_container {
    width: 100% !important;
}

..additionally, if you want a flexible layout, that shrinks/grows items on window size, then:

.horizontal .results .item {
    flex: 1 1 220px;
    max-width: 320px
}

.horizontal .resdrg {
    display: flex !important;    
    flex-wrap: wrap;
}

..of course you might need to experiment with the numbers there. This will result in something like this: https://i.imgur.com/GkXakmS.png

I hope this helps.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[MohrlojaParticipant]

It worked perfectly! Thank you very much!

Is there a way to make the width of the drop down menu a bit smaller?

Best regards
Jan Mohrlok

[Ernest MarcinkoKeymaster]

You are welcome!

I believe the width is adjusted based on the text, but it should be possible:

.searchsettings select {
    max-width: 200px !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts