Archived topic
How to display categories in multiple columns with block-hook element?
3 replies · Started by Yulia on May 6, 2022
Hi!
The way GeneratePress displays categories widget as a single column works great for a sidebar widget area that I do use on my home page.
I am trying to add another display option for my long list of categories. I want to display it in multiple (3) columns at the end of each blog post.
It is easy to insert categories list where needed using block-hook element. However, it displays as one long column, taking unreasonable amount of vertical space. There are many built in settings that Categories block has, but it lacks an options to display it in multiple columns.
Please help me figure out how to display categorizes in multiple columns.
Cheers.
Hi there,
are you using the Categories Block ?
If so select the one you would like displayed in Columns, and in the sidebar Advanced > Additional CSS Class(es) add: list-has-columns
Now add this CSS to your site:
.list-has-columns {
column-count: 3;
column-width: 220px;
}If it works then what it is doing is saying i would like 3 columns, but all columns must be at least 220px wide, so on smaller screens the number of columns will reduce. You may need to 'tweak' the 220px value.
That worked great, thank you David!
Glad to be of help
