Como deixar um item da categoria no menu de outra cor

Código CSS/HTML
1

Olá pessoal.

Conseguir deixar a categoria SALE em vermelho no desktop, mas no mobile não estou conseguindo.

Seguem os códigos:

Desktop: (OK)

li.categoria-id-16878286.menu-categoria.submenu2.subAbertura.sem-produtos strong.titulo {
    color: #ee4f4f !important;
    font-weight: 550 !important;
}

Mobile: (X)

@media only screen and (max-width: 1024px) {
.menu li.categoria-id-16878286 a.strong.titulo {
    color: red !important;
    font-weight: 400 !important;
}

sale
sale445×714 115 KB

Alguma ideia?
Obrigado!

2 
@media only screen and (max-width: 768px) { body .categorias-mobile li.categoria-id-16878286 strong.titulo {
    color: red !important;
}}
1 curtida
3

Funcionou!

Só deixei (max-width: 1024px), mas teria como deixar a palavra em negrito?
Testei assim, porém desabilita até o vermelho…

@media only screen and (max-width: 1024px) {
    body .categorias-mobile li.categoria-id-16878286 strong.titulo {
    color: red !important;
    font-weight: bold !important;
}
1 curtida
4

É por que ta faltando uma chave no final pra fechar o código, por isso não funciona…
quando usar o @media tem que usar 2 chave no final, a da div e do @media

@media only screen and (max-width: 1024px) {
    body .categorias-mobile li.categoria-id-16878286 strong.titulo {
    color: red !important;
    font-weight: bold !important;
}}
3 curtidas
5

Opa!
Perfeito!
Obrigado!

2 curtidas