Resize category banners

Product Support

AI-generated summary

The discussion is about resizing category banners on the mobile version of the forum. PaulinaMX reported that the banners are going out of the box after a recent update and requested help. Don suggested that the issue is caused by a CSS calculation that can result in overly wide images. He provided two potential solutions: adding a fixed max-width to the image or calculating the viewport’s max width to align the image. PaulinaMX implemented the solution and thanked Don, stating that the banners now look great.

1

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
Capture449Ă—800 52.6 KB

PaulinaMX (ForosMX) 2

Dramebaaz Anybody There GIF by Grish Majethiya

3

Hello,

I think it cause this css

.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.

.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.

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

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