@media screen and (max-width: 540px) {
#pun-navlinks img {display: none;}#pun-navlinks .container #navawards a {background-image: url(https://s3.uploads.ru/IExQT.png) !important;}
}
#pun-navlinks .container #navawards a {
display: inline-block;
background-image: url(https://s3.uploads.ru/IExQT.png) !important;
width: 105px !important;
height: 30px !important;
}
#pun-navlinks .container #navawards a span {display: none;}
}
Вы неправильно поставили, правильно так:
/* Замена кнопки Награды для ПК */
#pun-navlinks .container #navawards a {
display: inline-block;
background-image: url(https://s3.uploads.ru/IExQT.png) !important;
width: 105px !important;
height: 30px !important;
}
#pun-navlinks .container #navawards a span {display: none;}
/* Для мобильного стиля правки кнопок меню */
@media screen and (max-width: 540px) {
#pun-navlinks img {display: none;}
#pun-navlinks .container #navawards a {background-image: url(https://s3.uploads.ru/IExQT.png) !important;}
}
То, что внутри:
@media screen and (max-width: 540px) {
Здесь код
}
Это для мобильного стиля, он ставится ниже основного кода. У вас еще лишняя закрывающая скобка была.
Да даже в скриптах от дизайнера, которые я ранее выложила, можно посмотреть эти картинки по приведённым ссылкам. Мелких картинок нет, все в принципе одного размера.
Ну, тут либо самой нарисовать, либо в интернете поискать. В интернете встречаются подходящие.

Этот диз от mybb хранится на сервере! Иначе как кнопки прописываются?! Вот я и поняла, "где собака порылась". Это не вина конечного пользователя, а помехи идут от серверной части (я об этом и написала выше).

