XF 2.2 Reduce avatar size on mobile

[neon tetra]

I am having some trouble with a theme.

Basically trying to get high-res avatars and I changed the code in message_macros like this (which works for other themes)

<xf:avatar user="$user" size="l" defaultname="{$fallbackName}" itemprop="image" />

However, it enlarges the avatars on mobile views too and I want to reduce its size.


This is in the theme extra.less:

.avatar.avatar--l {
    zoom:4;
}


.avatar.avatar--m {
    zoom:2;
}


@media (max-width: 680px) { 
    .avatar.avatar--m {
        zoom:2;
    }
}


.avatar.avatar--s {
    zoom:1;
}

I contacted the author but even he is not helping so please assist to rectify this.