Pie de página receptivo fácil

[Johani (Joe)]

He aplicado algunas correcciones.

Cambios clave:

• el componente ahora utiliza variables CSS, por lo que es compatible con el modo oscuro

• algunas correcciones en las consultas de medios para solucionar el error reportado por @mbauman

• se agregó una configuración que permite controlar si el pie de página se muestra o no en las páginas que requieren inicio de sesión

  

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

@rolando

He hecho que mi .wrap sea más ancho (1200px) con consultas de medios para que, después de cierta resolución, el foro sea más ancho. Si habilito el pie de página responsivo, el .wrap se vuelve más estrecho (1100px), pero solo la «parte del tablero» y no .d-header .wrap ni .footer, que se mantienen en (1200px). En cuanto desactivo el pie de página responsivo, todo se ve más ancho (1200px) como se pretendía.

La causa aquí es la especificidad de CSS. Tu CSS apunta a .wrap y funciona, pero este componente también tiene algo de CSS que apunta a #main-outlet y le agrega algunas propiedades para mantener el pie de página en la parte inferior incluso en páginas cortas.

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

El selector #main-outlet es más específico que tu selector .wrap, ya que está basado en ID, por lo que anula tus estilos.

Puedes solucionarlo agregando este CSS:

#main {
  #main-outlet {
    width: 1200px; // o el ancho que desees usar
  }
}

@Edward_Legaspi

Hola. ¿Hay alguna forma de limitar el número de columnas del pie de página a 3?

Claro, elimina todas las columnas adicionales que no necesites en la configuración y obtendrás tres columnas.

@PoojaPatel

Después de la actualización, obtengo un error en la consola de Chrome como el siguiente.

No puedo reproducir este problema, pero el error implica que tu configuración es incorrecta. ¿Podrías verificarlo de nuevo y asegurarte de haber seguido las instrucciones bajo cada configuración? Si tu problema persiste, ¿podrías compartir un enlace al sitio donde ves el problema?

---

Hice un poco de limpieza y eliminé las respuestas sobre errores que se solucionarán una vez que actualices el componente. Si tu problema persiste, siéntete libre de publicar sobre ello nuevamente.