Intenta eliminar esta línea:
.subcategories,
1 me gusta
Estoy trabajando en ello. Estoy teniendo problemas con la posición. Tengo que llevarlo a la parte inferior.
¿Podrías proporcionarme un enlace a tu página de categorías para que pueda echar un vistazo?
Por supuesto, revisa esa página.
Intenta reemplazar todo tu CSS por esto:
.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;
}
Así se verá:
2 Me gusta
¿No hay ninguna clase .category-boxes en mi código CSS?
Ah, veo. No noté que el código de Johani estaba pensado para usarse en una página de categoría que no utiliza el estilo en cuadro.
Si no deseas tener una lista de temas bajo tus categorías en cuadro, selecciona “caja con subcategoría” y aplica mi CSS.
Si deseas tener una lista de temas bajo tus categorías en cuadro, mi código no funcionará, pero puedo intentar hacerlo funcionar.
2 Me gusta
Gracias por el gran apoyo. Intentaré aplicar la clase padding-top a las subcategorías. También planeo intentar recrear ese componente de categoría con 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;
}
}
}
}
}
Así es como se ve:
He modificado el CSS de Johani y no estoy seguro de qué tan fiables son mis modificaciones, ya que no sé qué hacen todas sus propias modificaciones.
2 Me gusta
¡Ya funciona! Además, he modificado algunas propiedades de CSS Flex. Pero tengo un problema. En el código de @Johani, las categorías se muestran normalmente en el diseño móvil. Sin embargo, nuestro código no funciona en móviles. He revisado el código de Joe para las categorías móviles; ¿cuál es la diferencia en la forma en que se listan las categorías en móviles? 
¡Tema genial!
Me preguntaba cómo podría hacer que la lista de subcategorías se muestre en una columna en lugar de una al lado de la otra.
Vista actual. Busco este estilo:
- Boletines.
- Pimax Oficial
- Mapa del sitio
Con el recuento de nuevas/no leídas de la subcategoría al lado.
Por alguna razón, cuando uso exactamente el mismo código, el texto no se centra en el cuadro. Las imágenes, sin embargo, sí lo están. Intenté ingresar el texto, pero las imágenes se mueven junto con el texto. ¿Alguien sabe qué estoy haciendo mal?