Show categories vertically in Persona

[alejandrocobo]

Hi,

Today I have updated nodebb to the last 1.12.2 version. With the update I have lost some of the CSS changes I made. There is one I am unable to restore with the new version of Persona Theme. Before the update, the categories were shown in the frontpage vertically instead of the dafault set up:

This is more an issue of me not knowing that much of CSS. Could anyone help me with this?

Thanks!

[oplik0]

.category-children-item {
  display: flex;
  float: none !important;
}

seems to do the trick.

EDIT:
after looking a bit at the topic @crazycells linked and looking at this for a few more minutes I think the better solution would be:

.categories .category-children {
  display: flex;
  flex-direction: column;
}

It doesn't affect how it works, but not using !important is the improvement here

Oh, and if you want some distance between the items just add margin-top or margin-bottom to .categories .category-children-item.

[crazycells]

a related topic you can get some info:

https://community.nodebb.org/topic/14061/persona-theme-subcategory-view-on-main-page

[alejandrocobo]

@oplik0 said in Show categories vertically in Persona:

.categories .category-children {
display: flex;
flex-direction: column;
}

Both of them worked fine.

Thank you very much, guys!