I found several sizing and alignment issues with the last update and had to fix them.
I would recommend using this code instead.
Simplified the code and added explanations on how to position and resize the image.
Also added two options for mobile view:
Option #1 for mobile view - Remove background image but leave group name
Option #2 for mobile view - Keep background image but resize it
Add the following code to fix the size and alignment in mobile view.
Code:/* Corrects mobile view for size and alignment -- tweak these numbers to suit your needs*/ @media (max-width: 650px){ .mybadge.message-userBanner.userBanner { background-position: left top; height: 8px; /* adjust to the size you would like to make the image */ background-size: 26px 26px; /* adjust to the size you would like to make the image */ min-block-size: 14px; /* adjust to the size you would like to make the image */ padding-top: 14px; /* modify this setting to adjust the distance between image and text */ text-align: left top; padding-left: 0px; text-indent: 30px; white-space: nowrap; } }
Added the ability to resize image within the extra.less file. Also made it a little easier to understand the difference between the two options, with or without "User Banner Text" text.
Just as the title implies...