# Resize category banners

**URL:** https://meta.discourse.org/t/resize-category-banners/216641
**Category:** Support
**Created:** [January 31, 2022, 10:34pm UTC](https://meta.discourse.org/t/resize-category-banners/216641 "2022-01-31T22:34:54Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [January 31, 2022, 10:34pm UTC](https://meta.discourse.org/t/resize-category-banners/216641/1 "2022-01-31T22:34:54Z")

</div>

After the update of the forum, the category banners on mobile version go out of the box, I imagine that fixing the size of the banners could be solved.

Could anyone help me please?

Thanks in advance.

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/5/5/55031b7fc0c90bcd81eba2a3a52781fc01245055.jpeg)

---

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [February 7, 2022, 11:28pm UTC](https://meta.discourse.org/t/resize-category-banners/216641/2 "2022-02-07T23:28:58Z")

</div>

![Dramebaaz Anybody There GIF by Grish Majethiya](https://global.discourse-cdn.com/meta/original/3X/7/7/77c752a55397fa087d53174aa5ff524833942dbd.webp)

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [February 8, 2022, 9:37am UTC](https://meta.discourse.org/t/resize-category-banners/216641/3 "2022-02-08T09:37:56Z")

</div>

Hello,

I think it cause this css

```scss
.category-logo.aspect-image {
  width: calc(var(--max-height) * var(--aspect-ratio));
}

```

Here the max-height is 150px and the aspect ratio depending by the image. It means if you have an image with aspect ratio 6… then it will be 150 x 6 = 900px width image. So it depending the image aspect ratio.

But you can overwrite this calculation…_(not this but it will affect it)_ with the following.  
Add a fix max-width to the image. So the image cannot be wider than this value.  
Add the following to mobile css section.

```scss
.category-list .category-logo.aspect-image {
  max-width: 250px;
}

```

* * *

Or you can try something like this on mobile. It will calculate the viewport max width and align the image to this.

```scss
.category-list .category-logo.aspect-image {
  max-width: calc(100vw - 2.5em);
}

```

---

<div class="post-metadata">

### Author: ![PaulinaMX](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulinamx/32/210473_2.png) [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [February 9, 2022, 3:41am UTC](https://meta.discourse.org/t/resize-category-banners/216641/4 "2022-02-09T03:41:28Z")

</div>

Thank you so much @Don :heart: Now it looks great!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [March 11, 2022, 3:41am UTC](https://meta.discourse.org/t/resize-category-banners/216641/5 "2022-03-11T03:41:30Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.