Alteração estilo em texto da home

Layout
1

Olá pessoal!

Olhei a documentação e estou com dificuldades de entender qual seção/conteiner alterar fonte e estilo de alguns textos da home de onde está escrito: escolha pela marca, lançamentos, mais vendidos, destaques, sales, comentários dos clientes… Sinalizado na img anexo.

Minha loja:

image
image499×809 87.9 KB

1 curtida
2

boa noite,
olha se te ajuda assim…
você alterar as informações como preferir…

.marcas strong {
    font-size: 1.69vw;
    color: red;
    font-weight: bold;
font-family: math;
}


.listagem .titulo-categoria strong {
    color: red;
    font-size: 1.69vw;
    font-family: math;
font-weight: bold;
}


#testimonials h2 {
    color: red;
    font-weight: bold;
    font-size: 1.69vw;
font-weight: bold;
}

image
image1912×862 231 KB

a

2 curtidas
3

Obrigado pela Resposta Paulo!

A cor consegui trocar! mas ainda estou tentando entender como eu forço a primeira letra maiuscula. Por exemplo “Sale”, “Escolha pela marca”, “Lançamentos” etc…

Na ferramenta de desenvolvedor do navegador aparece maiuscula, mas no site não.

4

Adiciona essa propriedade no código que passei…
olha se da certo

text-transform: none;

image
image1263×823 228 KB

no comentário dos clientes está minúsculo…

Captura de tela 2024-04-02 22555225
Captura de tela 2024-04-02 225552251160×821 120 KB

2 curtidas
5

Consegui @Paulo21! Fico grato pela ajuda!
Só um detalhe que ficou me incomodando… Na versão mobile ficou muito pequeno esses textos.

image
image1919×993 297 KB

você conhece uma forma de forçar o tamanho deles somente no mobile?

…Estou compartilhando abaixo o que deu certo para mim no caso de alguém precisar.

.marcas strong {
    font-size: 1.69vw;
    color: #d60b67;
    font-weight: bold;
    text-transform: none;
    }

.listagem .titulo-categoria strong {
    color: #d60b67;
    font-size: 1.69vw;
    font-weight: bold;
    text-transform: none;
    }

#testimonials h2 {
    color: #d60b67;
    font-weight: bold;
    font-size: 1.69vw;
    text-transform: UPPERCASE;
    }

no trecho #testimonials h2 só funcionou comigo o UPPERCASE, quando coloco o parametro “text-transform: none;” não funciona. Você já me ajudou muito! Obrigada!

6

tenta com esse aqui…

@media only screen and (max-width: 767px) {
.marcas strong {
    font-size: 18px!important;
    }

.listagem .titulo-categoria strong {
    font-size: 18px!important;
    }

#testimonials h2 {
    font-size: 18px!important;
    }
}

image
image552×772 53.5 KB

3 curtidas
7

Funcionou com 18px. Acredito que o problema estava na unidade vw.

1 curtida
8

sim, com isso " @media only screen and (max-width: 767px) " ele vai alterar o tamanho até telas com 767px, acima disso usará o outro tamanho…

1 curtida
9

Reparei que você inseriu dentro do @media only …

No meu aqui eu coloquei fora. Mas não vi nenhum problema.

@media only screen and (max-width: 767px){
.menu .nivel-tres {
display: table;
position: initial;
left: 85%;
top: 0;
width: 100%;
}
}


.marcas strong {
    font-size: 18px;
    color: #d60b67;
    font-weight: bold;
    text-transform: none;
    margin-left: -20px;
    }

.listagem .titulo-categoria strong {
    color: #d60b67;
    font-size: 18px;
    font-weight: bold;
    text-transform: none;
    }

#testimonials h2 {
    color: #d60b67;
    font-weight: bold;
    font-size: 18px;
    text-transform: UPPERCASE;
    }

Se tiver alguma sugestão…

10

Não tem problema, ele só vai ficar com o mesmo tamanho para o mobile e o Pc.

3 curtidas