Como esconder o rodapé no Mobile View

Rodapés personalizados com múltiplas colunas, links e elementos de branding são projetados para telas de desktop largas. Em telas móveis estreitas, o mesmo rodapé pode parecer apertado, transbordar seu recipiente ou ocupar uma quantidade desproporcional de espaço, tudo isso prejudica a experiência de leitura. Esconder o rodapé no celular permite manter um rodapé rico na área de trabalho enquanto apresenta um layout limpo e desorganizado para os leitores em telas menores.

NOTA

Isso se aplica apenas a rodapés personalizados. Isso não afeta o rodapé padrão do Document360. Para informações sobre como configurar um rodapé personalizado, leia o artigo sobre Rodapé personalizado.

Quando usar isso

Use essa personalização quando quiser:

• Evite que um rodapé personalizado complexo e com várias colunas pareça quebrado ou apertado nas telas de celular.
• Melhore a experiência de leitura no celular removendo conteúdos de rodapé que não são úteis ou acessíveis em telas pequenas.
• Aplique um layout responsivo onde o rodapé seja visível no desktop, mas suprimido no celular.

Antes de começar

• Você precisa de acesso às Configurações (
  ) > Site da base de conhecimento > Personalização do site > CSS & JavaScript personalizados no portal da base de conhecimento.
• Um rodapé personalizado já deve estar configurado no seu site de base de conhecimento. Esse CSS esconde o rodapé no celular, não cria um.

Como esconder o rodapé no visualizador móvel

1. Navegar até Configurações (

   ) > Site da base de conhecimento > Personalização do site > CSS & JavaScript personalizados no portal da base de conhecimento.

   

2. No painel de navegação à esquerda, selecione a aba CSS e cole o próximo trecho.

Esconde o rodapé em telas até 767px o largo (smartphones e tablets menores).

@media only screen and (max-width: 767px) {
    site-footer-section {
        display: none;
    }
}

3. Clique em Salvar no canto superior direito.

   

Desfecho

O rodapé está escondido nas telas dos celulares e continua exibido nas telas do desktop como de costume.

Melhores práticas

• Ajuste o ponto de quebra para combinar com seu layout, se necessário. Se seu rodapé personalizado começar a parecer problemático em uma largura maior ou mais estreita que o padrão, mude o max-width valor no trecho. Por exemplo, também escondo max-width: 1024px o rodapé em tablets.
• Teste em um dispositivo real depois de salvar. Ferramentas para desenvolvedores de navegador oferecem uma prévia móvel razoável, mas testes em um smartphone real confirmam que o rodapé desaparece no ponto de interrupção correto e o layout da página permanece correto.
• Considere o que você está escondendo. Se seu rodapé personalizado contiver links importantes, como informações de contato, avisos legais ou links de apoio, certifique-se de que eles estejam acessíveis aos leitores móveis por outros meios, como o cabeçalho do site ou a navegação do artigo.
• Para reverter, apague o trecho. Navegue de volta para a aba CSS em CSS & JavaScript Personalizado, remova o trecho e clique em Salvar. O rodapé reaparece imediatamente no celular.