# Category image heights / General understanding of theme variables

**URL:** https://meta.discourse.org/t/category-image-heights-general-understanding-of-theme-variables/138312
**Category:** Support
**Created:** [January 11, 2020, 11:08am UTC](https://meta.discourse.org/t/category-image-heights-general-understanding-of-theme-variables/138312 "2020-01-11T11:08:40Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![helmi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/helmi/32/114772_2.png) [@helmi](https://meta.discourse.org/u/helmi)
#### Post date: [January 11, 2020, 11:08am UTC](https://meta.discourse.org/t/category-image-heights-general-understanding-of-theme-variables/138312/1 "2020-01-11T11:08:40Z")

</div>

Hey all,

while playing with some theme modifications I noticed this piece of SCSS code

```
@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

```

I wonder what a proper way is (if there’s anyI) to change the max-height var here.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 11, 2020, 11:35am UTC](https://meta.discourse.org/t/category-image-heights-general-understanding-of-theme-variables/138312/2 "2020-01-11T11:35:00Z")

</div>

I’m not sure what you’re trying to achieve, but if you just want to make the logo bigger / smaller then here’s something to get you started.

The category logo is used in a couple of places by default - on the categories page and on specific category pages.

If you want to modify the logo sizes in both those locations, you can use this

```scss
@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // change 200 to the desired height
  }
}

```

Once you change the`--max-height` variable, the width should adjust automatically.

If you want to something more specific, like changing the logo sizes on the categories page only, then please check the `desktop_category_page_style` site setting on your site and let me know what it’s set to.

If you want the change to only occur on desktop, then add the CSS above to the desktop CSS tab of your theme. If you want it to only occur on mobile then add it to the mobile CSS tab. If you want it to occur on both mobile and desktop, then add it to the common CSS tab.

---

<div class="post-metadata">

### Author: ![jimkleiber](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jimkleiber/32/121814_2.png) [@jimkleiber](https://meta.discourse.org/u/jimkleiber)
#### Post date: [January 5, 2022, 8:51pm UTC](https://meta.discourse.org/t/category-image-heights-general-understanding-of-theme-variables/138312/3 "2022-01-05T20:51:59Z")

</div>

Hmm, I’ve tried to change the `--max-height` as you’ve suggested and while that part updates in the inspector, the image stays the same size.

I’ve noticed in the inspector that the `--aspect-ratio` value doesn’t seem to be set (there’s no clickable link in Chrome to the value) and I can’t figure out where it may be set. I’ve searched the Discourse GitHub code but still can’t find it.

Any idea how I can either find where the `--aspect-ratio` is being set or what value I should set for it?

Edit: found the problem, the height was being set by the [Discourse Category Headers theme component](https://meta.discourse.org/t/discourse-category-headers-theme-component/148682)

```plaintext
.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

```

So I just overrode the `max-height` in my theme.

```plaintext
category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
	max-height: 80px;
}

```

Edit #2: your suggestion did work for the category icons on the category page, so thank you!