Un usuario preguntó 👇
Hola,
Tengo widgets de 3 pies de página en mi página de inicio. Independientemente de la cantidad de material en cada uno, quería que fueran del mismo tamaño. Leo amablemente me ayudó a lograr esto al:
@media (min-width: 769px) {
.site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
display: flex;
}
}
/* match size of 1 & 3, to 2 */Esto funciona según sea necesario para computadoras de escritorio, iPad en formato vertical y dispositivos móviles. Sin embargo, por alguna razón, no funciona para iPad en el paisaje (el widget 3 es demasiado grande).
Pasé horas probando varias ‘soluciones’ disponibles en Internet (incluido el enlace que Tom proporcionó aquí: https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css/26861229#26861229) pero ninguna parte funciona. Admito que perdí y pido ayuda, por favor 🙂
(@leohsiang)
Hace 10 meses
Hola,
También intente agregar este SEC:
@media (max-width: 1024px) and (min-width: 768px) {
.inside-footer-widgets>div {
margin-bottom: 0;
}
}Lanzador de hilos
(@richieps)
Hace 10 meses
Hola leo
Excelente: definitivamente se está moviendo en la dirección correcta. 🙂
El widget 3 tiene ahora la misma altura que los widgets 1 y 2, que es lo que quería.
Sin embargo, sigue siendo mucho más ancho que los otros dos widgets: parecen estar alrededor del 25% cada uno y el 50%. ¿Podemos encontrar que tendrán el mismo ancho y la misma altura? (¡Dedos cruzados!)
(@leohsiang)
Hace 10 meses
Prueba esto:
@media (max-width: 1024px) and (min-width: 768px) {
.inside-footer-widgets .tablet-grid-50 {
width: 33%;
}
.active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
width: 33%;
}
}Lanzador de hilos
(@richieps)
Hace 10 meses
Hola leo
Gracias de nuevo.
Eso le da el mismo ancho a los 3 widgets, pero ahora el tercero es más alto nuevamente. Y, en términos de retratos de tabletas, los widgets ahora se apilan uno encima del otro en lugar de estar uno al lado del otro.
¿Quiero hacer algo que esté fuera de los límites del tema? Avísame si no es posible porque no quiero perder tu tiempo.
(@leohsiang)
Hace 10 meses
¿Eliminó el CSS Flexbox agregado anteriormente?
Lanzador de hilos
(@richieps)
Hace 10 meses
Hola leo
Lo siento, quiero hacer todo lo que pueda hacer yo mismo, en lugar de depender de ti. Lo que tengo en este momento es:
@media (max-width: 599px) {
.footer-widgets .widget > div {
padding: 10px;
}
}
/* Mobile */
@media (max-width: 899px) and (min-width: 600px) {
.footer-widgets .widget > div {
padding: 10px;
}
}
/* Tablet - portrait */
@media (max-width: 1199px) and (min-width: 900px) {
.inside-footer-widgets .tablet-grid-50 {
width: 33%;
clear: none !important;
}
.active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
width: 33%;
}
}
/* Tablet - landscape */
@media (min-width: 1200px) {
.site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
display: flex;
}
}
/* Desktop */Con esto, las presentaciones móviles, de escritorio y de tableta vertical son como las quiero. La presentación del paisaje de la tableta casi está ahí; es solo que el tercer widget se muestra en el siguiente conjunto en lugar de junto al segundo widget.
Gracias Richie
(@leohsiang)
Hace 10 meses
Es difícil escribir muchas preguntas desde los medios para atender todas las tabletas en modo vertical y horizontal.
¿Es esta la pregunta?
https://www.screencast.com/t/KbSw9yYC6i
Si es así, verá que la SEC específica aún no se ha descifrado.
Lanzador de hilos
(@richieps)
Hace 10 meses
Hola leo
Sí, parece que el caché no se borró por alguna razón, ahora lo está.
Creo que el formato de Shared Counts se está sumando a nuestros problemas. He modificado esto para que ahora solo haya un margen de 1 px entre los botones.
Las cosas están bastante cerca ahora. Si no tienes otras palabras de sabiduría, puedo dejar las cosas como están ahora y volver a ellas más tarde 😉
Lanzador de hilos
(@richieps)
Hace 10 meses
Idea extra …
¿Sería más fácil, más difícil o algo diferente si abandonara los widgets de pie de página por completo y solo usara GenerateBlocks para agregar un contenedor de 3 columnas al final de la página y agregar contenido de esa manera?
Lanzador de hilos
(@richieps)
Hace 10 meses
Hola leo
Ordenado 🙂
Debo admitir que no estoy del todo seguro de por qué funciona lo siguiente. Cambié las partes que se flexionaban ya que los widgets 3 eran las más grandes, así que lo cambié para que 1 y 2 se flexionaran.
De todos modos, gracias por toda su ayuda para encontrar la solución definitiva.
@media (max-width: 1199px) and (min-width: 900px) {
.inside-footer-widgets > .tablet-grid-50 {
width: 33.3333%;
}
.site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-2 {
display: flex;
}
.inside-footer-widgets > div {
margin-bottom: 0;
}
}
/* Tablet - landscape */ (@leohsiang)
Hace 10 meses
¡Me alegra que lo hayas descubierto!
La pregunta de los medios requiere mucho ensayo y error 🙂
Lanzador de hilos
(@richieps)
hace 9 meses
Actualización rápida (en caso de que alguien más tenga problemas similares) …
Mirando hacia atrás en el formato aquí para la entrada Shared Counts en el widget de texto del pie de página 3, y un poco frustrado por los intentos fallidos de enmendar la SEC, encontré un enlace del autor del plugin:
https://sharedcountsplugin.com/2019/03/27/display-share-buttons-using-a-shortcode/
El punto clave aquí es que puede cambiar el atributo «ubicación». He modificado la entrada de acceso directo en el widget de texto para leer: [shared_counts location=”RR-sharedcounts” style=”buttons”]. Luego usé el siguiente CSS para obtener el espaciado que quería:
.RR-sharedcounts {
display: flex;
justify-content: space-between;
}(@leohsiang)
hace 9 meses
¡Gracias por compartir!
¿Solucionó tu problema??
0 / 0