Tamaño del logo de la categoría en categorías específicas - solo se aplica cuando se accede directamente

Error
1

Para una categoría específica, añadimos el siguiente CSS para ajustar el tamaño del logo de la categoría. Pero el CSS solo se aplica cuando accedes a la categoría a través de un enlace, mira aquí:

Contests - Forum | Cannabisanbauen.net (funcionamos en la versión estable 3.2)

CSS (en Común):

/* Categoría de Concursos - imagen de categoría para cada subcategoría de concurso */
body[class^="category-contests"] {
@supports (--custom: property) {
.category-logo.aspect-image {
    --max-height: 250px;
}
.category-boxes .category-box .category-logo.aspect-image img, .category-boxes-with-topics .category-box .category-logo.aspect-image img {
    --height: 250px;
}
}
}

Pero al venir de otra página del foro, el CSS no se “activa” y los logos de las categorías siguen teniendo el tamaño predeterminado.

Para reproducir:

  1. Ve a https://forum.cannabisanbauen.net/
  2. Ve a la categoría “Concursos” a través de la barra lateral o el selector de categorías
  3. Los logos de las categorías tienen el tamaño predeterminado.

¿Es un error o deberíamos implementar el CSS de manera diferente?

2

¡Hmm, ese es un problema inusual!

Noté que, dependiendo de cómo llegues a la página, las clases asignadas a <body> están en un orden diferente:

image
image925×184 38.5 KB

El símbolo “^” en “body[class^=\"category-contests\"]” hace que busque una coincidencia solo al principio de la lista de clases, por lo que supongo que solo funcionaba cuando ‘category-contest’ era la primera clase en la lista.

Hay otro símbolo “*” que buscará una coincidencia en cualquier parte de la lista de clases. Podrías intentar cambiar la primera parte a esto:

body[class*="category-contests"]
          ↑ ( * en lugar de ^)

O una forma más simple de escribir esto sería:

body.category-contests

¡Avísame si eso ayuda!

2 Me gusta
3

Gracias, eso en realidad lo resolvió… no sé por qué lo compliqué tanto :smiley: