Documentation Index

Fetch the complete documentation index at: https://docs.document360.com/llms.txt

Use this file to discover all available pages before exploring further.

Isenção de responsabilidade: Este artigo foi gerado usando tradução automática.

Como esconder o rodapé no Mobile View

Prev Next

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.

    Custom CSS and JavaScript settings panel in the Document360 Knowledge base portal

  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;
    }
}
  1. Clique em Salvar no canto superior direito.

    CSS tab showing the mobile footer hide snippet saved in the Custom CSS and JavaScript panel


Desfecho

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

Before and after comparison showing the knowledge base site footer hidden on mobile after applying the CSS


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.