Suporte » Temas » Configuração de fonte na versão mobile

  • Resolvido colpani

    (@colpani)


    Possuo um site (http://www.susakiacupuntura.com.br) em que as configurações aparecem corretas quando visto no pc porém, na versão mobile, ao rolar a barra lateral para baixo até a sessão “Tratamentos e massagens” as fontes não ficam alinhadas dentro da caixa de artigo. Como a fonte está muito grande acaba que algumas palavras ficam quebradas em duas linhas.
    Tentei diminuir o tamanho da fonte dentro da caixa de artigo mas o tamanho não altera nem na versão desktop nem na mobile.

    Veja aqui a versão mobile e a fonte alterada apenas nas configurações do wordpress.

    Agradeço quem puder ajudar.

    • Este tópico foi modificado 1 mês, 2 semanas atrás por colpani.
Visualizando 12 respostas - 1 até 12 (de um total de 12)
  • 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]

    Olá @ralden, agradeço a sua ajuda e a explicação do que que foi feito.

    Fui eu mesmo quem criou o site. O estranho é que logo que fiz a página não estava assim, estava tudo configurado corretamente. Também não consigo precisar quando é que ocorreu essa alteração pois olho o site com frequência pelo computador e não pelo celular.

    Utilizei para a construção o Betheme e modifiquei o tema “Massage”.

    Fiz conforme indicado por ti inserindo o código CSS porém o problema continua quando visualizado no celular.

    saudações,

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

    Screenshot

    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]

    @ralden, fiz a alteração mas ainda não funcionou.

    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,

    Screenshot

    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]

    Cliquei no botão de publicar sim mas, por precaução, fiz o procedimento novamente.

    O que notei agora foi de que a palavra apesar de ainda estar quebrada, diminuiu um pouco essa diferença (não sei se me fiz entender. Antes as letras “ura” ficavam na outra linha, agora apenas a letra “a”).

    Talvez reduzir de 13px para um tamanho menor possa resolver, não?

    • Esta resposta foi modificada 1 mês, 1 semana atrás por colpani.

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

    Screenshot

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

    Screenshot

    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]

    Opa!! Verifiquei no Iphone X e realmente agora está correto. No meu celular (Huawei P20 Pro) ainda aparece a letra “a” na outra linha. Reduzi o tamanho da fonte para 12px (e para 11px também), cliquei no “Publicar” mas parece que não atualizou na página (como ocorreu antes com o !important). Vou aguardar mais um pouco e tentar novamente.

    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]

    Rapaz, o negócio não é fácil. Mas vamos lá.

    Eu havia retirado o código CSS para fazer tudo novamente do início pois ainda ficava a palavra quebrada em alguns aparelhos mesmo alterando o tamanho para 11px.

    Refiz o processo todo pelo PC:

    Aparência > Personalizar > CSS adicional > (adicionei o código) > Publicar.

    Limpei o cache (através do autoptimize), limpei o cache do chrome… parece que voltou a estaca 0.

    • Esta resposta foi modificada 1 mês, 1 semana atrás por colpani.
    • Esta resposta foi modificada 1 mês, 1 semana atrás por colpani.

    @ralden, bom dia!

    verifiquei agora o site e está resolvido! Tudo configurado corretamente para a visualização em diferentes tipos de tela.

    Agradeço muito sua ajuda, explicações, persistência e paciência. Sozinho jamais teria conseguido.

    Muito obrigado mesmo!!!

    • Esta resposta foi modificada 1 mês, 1 semana atrás por colpani.

    opa, que ótima notícia! o importante é acabar bem e resolvido!

    sucesso com o site! [gassho]

Visualizando 12 respostas - 1 até 12 (de um total de 12)
  • Você deve estar conectado para responder a este tópico.