Hide or downsize icons

[Matija_Nalis]

I’m not sure how big it was originally on mobile, but both on desktop (see Hide or downsize icons - #18 by Matija_Nalis above) and on mobile (see below) it still looks excessively big to me eating into much of screen estate for no gain.

As noted in post above, it should be at most max-width: 60% (or even better max-width: 50%).

i.e. change that max-width: 100%; to max-width: 50%; in CSS:

.category-logo.aspect-image img {
	width: calc(var(--max-height) * var(--aspect-ratio));
	max-width: 50%;
	height: inherit;
	max-height: var(--max-height);
}

Since it should now correctly calculates aspect ratio (see width: .... in CSS above) which was problem in initial implementation. Could we have that?

[nukeador (Rubén Martín)]

Thanks for that, I’ve just applied the css.

Let’s see if people over different browsers are not seeing a weird aspect ratio, looks good on my Firefox.

[Matija_Nalis]

Thanks @nukeador ! Reduced size seems to work great on desktop for my Firefox, surf and Chromium for me:

---

On the mobile, it didn’t seem to have had an effect, which while good (it didn’t break anything!) is also somewhat disappointing - as the problem with oversized icons continues there. I agree with previous comment that since screen estate is premium at mobile, perhaps category icons can be disabled there completely, e.g. via media query like:

@media only screen and (max-width: 767px) {
    .category-logo.aspect-image img { display: none; }
}

vs.

(I’ve also tried just reducing icon size more on mobile, but it just looks ugly and does not save much space, because it is displayed in new line with margins etc. anyway… It might be possible to reduce it to say 10% (about height of the letters) and modify layout so icon is inline with the category name, but that is likely more complex and possible problematic - and needs testing on multiple devices - for little gain. But if you wish, I can try to investigate that)

[nukeador (Rubén Martín)]

@Matija_Nalis

(I’ve also tried just reducing icon size more on mobile, but it just looks ugly and does not save much space, because it is displayed in new line with margins etc. anyway… It might be possible to reduce it to say 10% (about height of the letters) and modify layout so icon is inline with the category name, but that is likely more complex and possible problematic - and needs testing on multiple devices - for little gain. But if you wish, I can try to investigate that)

It seem reasonable, applied, thanks again!