Цифры баланса уезжают за пределы

Alena-ps сказал(а)
Править стилями у себя на сайте или есть более общее решение проблемы?

Править стилями. Либо увеличивать кружок, либо уменьшать размер цифр, либо менять шрифт.
Вот как у меня на сайте выглядит четырёхзначное число (всё поместилось):

Какая плодотворная ночь у вас всех выдалась.
Павел, спасибо за поддержку)
Alena-ps, надеюсь у вас все получилось?

Всем привет,
Раз пошла такая тема, хочу попросить Игоря рассмотреть вариант больше ноля.
Вот как у меня получилось
1. когда баланс равен нолю

2. двух кратное число

3. много кратное число

Vadik O сказал(а)
Раз пошла такая тема, хочу попросить Игоря рассмотреть вариант больше ноля.

Наверно самое простое решение, так как вариантов много получится, как цифр после запятой, просто убрать радиус у этого дела и будет все влезать. Но мне сейчас технически неудобно этот момент смотреть и проверять.
Можете попробовать в этих блоках подобрать вариант и добавить в доп стили.

#recallbar .rcb_nmbr {
    height: 30px;
    line-height: 30px;
    width: 30px;
}
#recallbar .rcb_nmbr {
    border-radius: 50%;
    font-size: 12px;
}

garry сказал(а)
Можете попробовать в этих блоках подобрать вариант и добавить в доп стили.

Этот сайт-бар у меня не этим допом выводится, баланс выводится снипетом.

garry сказал(а)
просто убрать радиус у этого дела и будет все влезать.

Если убрать только радиус, то в мобильной версии баланс у меня уходит под аватарку, если не добавляю width: auto;

Вот мои стили

#recallbar .rcb_nmbr {
    background: none;
    color: #55555e;
    line-height: 20px;
    border: 1px solid #ddd;
}
#my_balance .rcb_nmbr.counter_not_null {
    background: #26ab2a;
    border-radius: 10%;
    font-weight: bold;
    height: auto;
    line-height: inherit;
    padding: 1px;
    color: #f3f3f3;
    width: auto;
}

Vadik O сказал(а)
Вот мои стили

А вот мои стили: в мобильной версии перенёс верхний Recallbar вниз, создав нижний Recallbar:

Спойлер

Vadik O сказал(а)
Может кому пригодятся

Мне пригодились, Vadik O, спасибо большое!

Я частично воспользовался Вашей подсказкой, и вывел баланс на одной линии с иконкой банкноты, сохранив кружочки к остальным иконкам, потому что они у меня анимированные (какие-то мигают, какие-то двигаются вверх-вниз при новых событиях).

Вот что получилось:

Спойлер

Мне пригодились, Vadik O, спасибо большое!

Я рад, что пригодилось.
Здесь фишка в том, что при уведомлении и событии можно выделить, показать полный баланс и сконцентрировать внимание пользователей

Vadik O сказал(а)
Здесь фишка в том