CSS p/ versão mobile

Olá,

Precisei fazer uma alteração na minha loja, pois o tema que comprei não aparecia o valor a vista na vitrine.

Consegui fazer através do css que aparecesse na versão desktop, através do seguinte código:

.preco-produto .desconto-a-vista {
font-size: 20px;
line-height:16px;
}
.preco-produto .desconto-a-vista::before {
content: ‘’;
font-size: 14px;
}
.preco-produto .desconto-a-vista::after {
content: ‘Pix’;
font-size: 18px;
}
.preco-produto .desconto-a-vista strong {
font-size: 14px;
padding: 0 5px;
}

.produto .principal .acoes-produto .desconto-a-vista {
color: #31B15F;
font-size: 18px;
line-height: 22px}

.produto .acoes-produto .preco-parcela {
font-size: 16px}

div.preco-produto {
color: #31b15f}

.pagina-inicial .acoes-produto .desconto-a-vista {
color: #31B15F;

Nesse código também faço a inclusão do nome “Pix” ao lado de “Boleto”, que só aparece na versão desktop e nada na mobile.

Alguma luz do que fazer? link provisório da loja: aromist.lojaintegrada.com.br

Desde já agradeço