Configuração de fonte na versão mobile

saudações,

aparentemente, quem criou seu site não fez os ajustes de fontes para tela mobile. o ideal seria saber se o site usa algum page builder ou opções do tema para esses ajustes. mas é possível também fazer esse ajustes direto com CSS.

vá em Aparência > Personalizar > na seção CSS adicional > e coloque o código abaixo,

@media screen and (min-width: 451px) {
  .desc_wrapper h4 {
    font-size: 17px;
  }
}

@media screen and (max-width: 450px) {
  .desc_wrapper h4 {
    font-size: 13px;
  }
}

o que estou dizendo nesse código é que em telas a partir de 451px de largura ou maiores, o elemento “h4” dessa área (que é o texto), que usa a class “desc_wrapper”, deve usar o tamanho de fonte 17 px, como já está no seu site, normalmente. mas a partir de 450px de largura ou menos, deve diminuir a fonte para 13px.

testando com a ferramenta Inspecionar, presente em qualquer navegador moderno clicando com o botão direito, fiz testes que me levaram a achar que essas são as configurações ideais.

por favor teste e diga se deu certo. ah, caso use algum plugin de cache, quando for testar ou limpar o cache ou use uma aba privativa de seu navegador.

boa sorte. [gassho]

saudações,

sim, o problema continua. veja a imagem abaixo, (caso esteja pequena, clique aqui para ver versão ampliada em nova aba),

o código foi carregado, mas curiosamente não foi considerado prioritário, como deveria ser quando se usa o CSS adicional.

nesse caso, vamos “apelar” para um recurso que não gosto de usar, mas parece ser o caso aqui. volte em Aparência > Personalizar > na seção CSS adicional > e atualize o código,

@media screen and (min-width: 451px) {
  .desc_wrapper h4 {
    font-size: 17px;
  }
}

@media screen and (max-width: 450px) {
  .desc_wrapper h4 {
    font-size: 13px !important;
  }
}

com esse !important você diz pro navegador que esse é o código prioritário. é algo que deve ser usado com parcimônia – apesar dos desenvolvedores não se darem tanto ao trabalho…

por favor, tente novamente e veja se agora dá certo. boa sorte. [gassho]

saudações,

além de ter modificado, você clicou no botão azul Publicar, no topo da seção onde fica o CSS Adicional? porque visualizando seu site, não apareceu o !important,

por favor verifique, talvez tenha mudado, mas não clicou no botão publicar. então quando olhar o código, não estará com o

.desc_wrapper h4 {
    font-size: 13px !important;
  }

[gassho]

ah, agora sim funcionou, posso ver no inspecionar que riscou o antigo 17px e agora está rodando com 13px de tamanho,

no navegador, simulando um iPhoneX com tela de 375px de largura, ficou perfeito com fonte em 13px,

mas se não ficou bom na sua visualização, então volte lá no CSS Adicional e diminua para 12px. ai sim, com toda certeza absoluta não haverá mais essa quebra.

[gassho]

saudações,

revendo agora, sumiu no CSS Adicional o !important, então a fonte voltou a ficar 17px e, com isso, quebrando as frases. então precisa voltar no CSS Adicional e rever o código.

alguns pontos interessantes de observar:

1. faça essa operação em um computador, infelizmente esse gerenciamento do wp-admin ainda precisa ser feita em um computador, em celular costuma dar problemas,
2. antes de testar no celular, verifique se seu celular tem plugin de cache; se sim, limpe o cache antes de testar,
3. antes de fazer o teste no celular, limpe o cache do navegador ou use uma aba privativa.

assim, quando configurar a fonte para 11px e com o !important, limpando o cache tanto do plugin (caso use) como do navegador no celular (ou usando uma aba privativa), conseguirá visualizar se as alterações ficaram boas como deseja.

[gassho]