@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) {
Здесь код
}
Это для мобильного стиля, он ставится ниже основного кода. У вас еще лишняя закрывающая скобка была.
Да даже в скриптах от дизайнера, которые я ранее выложила, можно посмотреть эти картинки по приведённым ссылкам. Мелких картинок нет, все в принципе одного размера.
Ну, тут либо самой нарисовать, либо в интернете поискать. В интернете встречаются подходящие.