Pi footer responsive

[Johani (Joe)]

Ho applicato alcune correzioni.

Principali modifiche:

• il componente ora utilizza variabili CSS, quindi è compatibile con la modalità scura

• alcune correzioni alle query media per risolvere il bug segnalato da @mbauman

• aggiunta un’impostazione che consente di controllare se il piè di pagina deve essere visualizzato nelle pagine che richiedono l’accesso

  

Easy Footer v2.3 (#7)

@rolando

Ho reso più ampia la mia classe .wrap (1200px) tramite query media, in modo che dopo una certa risoluzione il forum diventi più largo. Se attivo il piè di pagina responsivo, la classe .wrap diventa più stretta (1100px), ma solo per la “parte della bacheca” e non per .d-header .wrap né per .footer, che rimangono a 1200px. Non appena disattivo il piè di pagina responsivo, tutto torna più ampio (1200px) come previsto.

La causa qui è la specificità CSS. Il tuo CSS seleziona .wrap e funziona, ma questo componente include anche del CSS che seleziona #main-outlet e gli aggiunge alcune proprietà per mantenere il piè di pagina in basso anche nelle pagine brevi.

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

Il selettore #main-outlet ha una specificità maggiore rispetto al tuo selettore .wrap — poiché si basa su un ID — quindi sovrascrive i tuoi stili.

Puoi risolvere aggiungendo questo CSS:

#main {
  #main-outlet {
    width: 1200px; // o la larghezza che preferisci
  }
}

@Edward_Legaspi

Ciao. Esiste un modo per limitare il numero di colonne del piè di pagina a 3?

Certo, rimuovi tutte le colonne extra che non ti servono nelle impostazioni e otterrai tre colonne.

@PoojaPatel

Dopo l’aggiornamento ricevo un errore nella console di Chrome come indicato di seguito.

Non riesco a riprodurre questo problema, ma l’errore suggerisce che le tue impostazioni non sono corrette. Puoi verificare di nuovo e assicurarti di aver seguito le istruzioni sotto ogni impostazione? Se il problema persiste, puoi condividere un link al sito dove riscontri l’errore?

---

Ho fatto un po’ di pulizia e ho eliminato le risposte relative ai bug che verranno risolti non appena aggiornerai il componente. Se il tuo problema persiste, sentiti libero di pubblicare di nuovo a riguardo.