Try removing this line:
.subcategories,
1 „Gefällt mir“
Can you provide me a link to your category page so I can have a look?
Of course, please check that page.
Try replacing all your CSS by this:
.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
width: 150px;
height: auto;
}
.category-boxes .category-box, .category-boxes-with-topics .category-box {
background-color: #F2F2F2;
}
.category-boxes .description {
display: none;
}
.category-boxes .subcategories {
padding-top: 1em;
}
It will look like this:
2 „Gefällt mir“
There is no .category-boxes class in my CSS code?
Ah, I see. I didn’t notice that Johani’s code was meant to be used on a category page which doesn’t use the boxed style.
If you don’t want to have a list of topics under your boxed categories, select “box with sub-category”, and apply my CSS.
If you want to have a list of topics under your boxed categories, my code won’t work, but I can try to make it work.
2 „Gefällt mir“
Thank you for the great support. I will try to give subcategories class to padding-top. Also I am planning to try recreate that category component with CSS Grid. 
.categories-and-latest {
flex-direction: column;
}
.category-list {
thead,
.topics,
.category-description {
display: none;
}
tbody {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
tr {
display: inline-block;
width: 250px;
min-height: 250px;
margin: 0.75em;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
border-left-color: transparent;
}
.category {
padding: 1.25em 0;
border-width: 0;
display: block;
width: 100%;
height: calc(100% - 2.5em);
position: relative;
background: #f2f2f2;
display: flex;
flex-direction: colum;
flex-wrap: wrap;
align-items: center;
.category-logo {
float: unset;
margin: 0 auto;
}
h3 {
a[href] {
display: flex;
flex-direction: column;
width: 250px;
order: 1;
.category-text-title {
justify-content: center;
}
}
}
&:after {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
content: "";
z-index: 1;
box-sizing: border-box;
pointer-events: none;
border-left: 6px solid;
opacity: 0.35;
border-color: inherit;
}
.subcategories {
.category-name {
margin-top: 0;
}
.badge-notification {
display: none;
}
}
}
}
}
It looks like this:
I modified Johani’s CSS and I’m not sure how reliable my modifications are since I don’t know what all his own modifications do.
2 „Gefällt mir“
It works now! Also i am changed some CSS Flex property. But i have one problem. In @Johani’s code, categories are normally listed in mobile design. But our code is doesn’t work for mobile. I am checked Joe’s code for the mobile categories, what is the difference for listing categories for mobile? 
Awesome topic!
Was wondering how would I make subcategories list in a column vs side by side?
Current view. Looking for this style
- Bulletins.
- Pimax Official
- Site Map
With beside Subcategory New/unread count.
Aus irgendeinem Grund wird der Text bei mir nicht zentriert, wenn ich exakt denselben Code verwende. Die Bilder werden jedoch zentriert. Ich habe versucht, den Text einzugeben, aber die Bilder bewegen sich dann mit dem Text. Weiß jemand, was ich falsch mache?