Rodapé Responsivo Fácil

[Johani (Joe)]

Empurrei algumas correções.

Principais alterações:

• o componente agora usa variáveis CSS, tornando-o compatível com o modo escuro

• algumas correções nas media queries para resolver o bug relatado por @mbauman

• adicionei uma configuração que permite controlar se o rodapé deve ser exibido ou não em páginas que exigem login

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

Aumentei a largura do meu .wrap (1200px) com media queries para que, após uma certa resolução, o fórum fique mais largo. Se eu ativo o rodapé responsivo, o .wrap fica mais estreito (1100px), mas apenas na “parte do quadro” e não no .d-header .wrap nem no .footer, que permanecem em (1200px). Assim que desativo o rodapé responsivo, tudo fica mais largo (1200px) como pretendido.

A causa aqui é a especificidade do CSS. Seu CSS tem como alvo .wrap e funciona, mas este componente também possui CSS que tem como alvo #main-outlet e adiciona algumas propriedades a ele para manter o rodapé no final, mesmo em páginas curtas.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

O seletor #main-outlet é mais específico que o seu seletor .wrap — porque é baseado em ID, então ele sobrescreve seus estilos.

Você pode corrigir isso adicionando este CSS:

#main {
  #main-outlet {
    width: 1200px; // ou qualquer largura que você queira usar
  }
}

@Edward_Legaspi

Olá. Existe uma maneira de limitar o número de colunas do rodapé a 3?

Claro, remova todas as colunas extras que você não precisa nas configurações e você terá três colunas.

@PoojaPatel

Após a atualização, estou recebendo um erro no console do Chrome como abaixo.

Não consegui reproduzir esse problema, mas o erro sugere que suas configurações estão incorretas. Pode verificar novamente e garantir que você seguiu as instruções abaixo de cada configuração? Se o seu problema persistir, pode compartilhar um link para o site onde você está vendo o problema?

---

Fiz uma pequena limpeza e excluí as respostas para bugs que serão corrigidos assim que você atualizar o componente. Se o seu problema persistir, sinta-se à vontade para postar sobre isso novamente.