How do I stop the Category Logo Image from resizing?

As you can see below, before saving the category it looks nice. Upon saving it, it blows up and looks bad. Is there a setting I am missing?

1 2

Inspect elementing it shows that style="--aspect-ratio: 1.3333333333333333;" is responsible for the distortion. Both on the category itself and on the homepage.

Any help to this? It’s still doing it on the default theme.

Hmm, still haven’t found a solution.

In both pages maximum height of the category images are set to 150px by default. You can adjust it using the custom CSS.

.category-logo.aspect-image {
  --max-height: 36px;
  --max-width: 36px;

Good to know. Thanks! How do I manage this when the images are potentially different sizes and I don’t want them to scale at all? The effects I put on the images will look bad if scaled up or down. Or is your code just saying that it can be a max height and width of 36px?

Hey @vinothkannans, just want to make sure this is also a good way to do it. It seems to work great because all of my images are slightly different sizes but I’m a css noob.
.category-logo.aspect-image { --max-height: initial; --max-width: initial; }

Edit: Hm, on desktop it looks great but on mobile its blown out of proportions. I guess not. Not sure if that is fixable but if it isn’t, is there a way to just hide them on mobile?


Sure, you can hide using the CSS below. Remember to put it on mobile section of theme customization.

.category-logo.aspect-image { display: none; }

How to increase the size of the Category box image?

Having the same problem now that I enabled this in a category. The images are again scaled and make them look bad. What is the point of automatically scaling things? I can understand it for cases when I upload an image that is 400x400 and it’d destroy the entire page but my images are around 48x48. They’re scaling them to 40x40, which distorts them. Annoying.


Seems like these 2 are responsible for the resizing.