Category logo size on specific categories - only applied when accessed directly

Bug
1

For a specific category we added the following CSS to adjust the size of the category logo. But the CSS is only applied when you access the category through a link, see here:

Contests - Forum | Cannabisanbauen.net (we run on 3.2 stable)

CSS (in Common):

/* Contest Kategorie - category image for each contest subcat  */
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;
}
}
}

But when coming from another page on the forum, the CSS isn’t “triggered” and category logos are still the default size.

To reproduce:

  1. go to https://forum.cannabisanbauen.net/
  2. Go to “Contests” category via sidebar or category picker
  3. Category logos are default size

is that a bug or should we implement the CSS differently?

2

Hmm, that’s an unusual problem!

I noticed that depending how you get to the page, the classes assigned to <body> are in a different order:

image
image925×184 38.5 KB

The "^" symbol in “body[class^="category-contests"]” makes it search for a match only at the start of the list of classes, so my guess is that it was only working when ‘category-contest’ was the first class on the list.

There’s another symbol “*” that will search for a match anywhere in the class list. You could try changing the first part to this:

body[class*="category-contests"]
          ↑ (* instead of ^)

Or a simpler way to write this would be:

body.category-contests

Let me know if that helps!

2 Likes
3

Thx that actually solved it…dunno why I overcomplicated it so much :smiley: