Pregunta sobre Gutenberg Blocks by Kadence Blocks – Page Builder Features de Wordpress:

6 columnas se dividen directamente en 1 columna

Un usuario preguntó 👇

Tengo 6 columnas en una fila y se divide directamente en 1 columna. Quiero que se ejecute y se rompa de manera responsable, para incluir un salto de 2 columnas.

Con las columnas de Gutenberg, pude lograr esto colocando lo siguiente en mi campo promedio de 640: .wp-block-column {flex: 1; margen inferior: 1em; base flexible: 50%; ancho mínimo: 0; salto de palabra: romper todo; overflow-wrap: palabra de ruptura; }

Al explorar los elementos, veo un elemento: # kt-layout-id_4f9392-8e> .kt-row-column-wrap {padding-left: 0px; padding-right: 0px; ancho máximo: 1138px; margen izquierdo: automático; margen derecho: automático; } Pero el envoltorio no parece cambiar

Este tema fue modificado hace 1 año, 12 meses por.

(@britner)

Hace 1 año, 12 meses

Oye, dentro de los sitios de plugins, puedes definir columnas para tabletas y dispositivos móviles.

Haga clic en el icono de la tableta en la parte superior derecha donde establece cuántas columnas en la configuración consecutiva y luego puede definir el diseño de la tableta. Haz lo mismo en la pestaña móvil.

¡Avísame si eso ayuda!

Ben

Lanzador de hilos

(@mowlman)

Hace 1 año, 12 meses

Lo siento, no hay ninguna pregunta, obtuve los controles para especificar el móvil y cambié las columnas de 6 a 2. También cambié la canaleta a cero, pero no parece cambiar. Tengo las 6 columnas ampliadas, así que tal vez eso esté anulando la diferencia.

(@britner)

Hace 1 año, 12 meses

¿Puedes publicar un enlace a la página para que pueda ver?

Ben

Lanzador de hilos

(@mowlman)

Hace 1 año, 12 meses

My Site Dev está en https://www.devclosetbay.com/

Estoy usando un tema de fachada de almacén.

El primer conjunto de imágenes usa columnas de Gutenberg que estoy tratando de reemplazar. El segundo conjunto usa un ancho de 6 col para escritorio y para móvil lo cambié a 2 col y cambié el canalón hasta que no hubo gater. Realmente prefiero un pequeño espacio. En el móvil me gusta la forma en que las columnas son gutenberg, menos espacio entre imágenes y por tanto las imágenes son un poco más grandes. Quiero deshacerme de las columnas de Gutenberg ya que prefiero la mía, solo quiero averiguar el espaciado.

(@britner)

Hace 1 año, 12 meses

Oye, creo que veo la confusión. Está arreglando el «canalón vertical» sin ninguno. Pero eso no es lo mismo que la cuneta. El canalón vertical analiza la cantidad de espacio entre los elementos cuando se escuchan, por ejemplo, entre las filas 1 y 2 en un teléfono móvil.

No hay opción para cambiar el canalón horizontal en un teléfono móvil. Pero probablemente hagas un punto que debería estar ahí. Intentaré agregar esa característica.

Ben

Lanzador de hilos

(@mowlman)

Hace 1 año, 12 meses

¡Bien gracias! Columna de canaleta Veo en la opción Escritorio, donde la veo etiquetada Columna de canaleta de colapso vertical cuando selecciono móvil. El canalón de la columna parece expandirse cuando está en el escritorio para expandir el espacio.

Quería identificarlo para poder agregarlo a mi CSS personalizado

Encontré esto: .kt-mobile-layout-two-grid.kt-gutter-wide> .wp-block-kadence-column {-ms-flex: 0 0 calc (50% – 30px); flex: 0 0 calc (50% – 30px); }

Pero todavía no parecen reducir el espacio y así permitir que las imágenes sean un poco más grandes. La pantalla promedio con la que estoy tratando es de 480.

(@britner)

Hace 1 año, 12 meses

Actualmente tienes la canaleta más ancha. Si cambia eso en su elección, las columnas de medianías en la fila permitirían que sus imágenes fueran más grandes.

Creo que ahora estoy confundido en cuanto a lo que necesitas.

Lanzador de hilos

(@mowlman)

Hace 1 año, 12 meses

Todo está bien en el escritorio, cuando cambio al móvil, tengo esas 6 imágenes divididas 2 por 2 en una cuadrícula de 2 columnas y estoy tratando de reducir el espacio entre esas 2 imágenes 2

Entonces, para el escritorio, configuré Column Gutter en 60px más ancho y en el sitio móvil quería reducir la disposición de las columnas a 10px o algo así.

Usar las herramientas para desarrolladores de Chrome y ver el sitio (https://www.devclosetbay.com/) para dispositivos móviles, por ejemplo 480. Verás la primera fila de 6 imágenes de 2 por 2 mostradas usando las columnas de Gutenberg, y cuando sigas desplazándote hacia abajo, verás el segundo conjunto de 6 imágenes con Kadence. Solía ​​ver que tienes más espacio entre ellos. Estoy tratando de replicar el espaciado a partir del primer conjunto. Aquí hay una captura de pantalla: https://snag.gy/baSi2s.jpg

(@britner)

Hace 1 año, 12 meses

Sí, como dije, la elección es solo algo que puedo agregar.

Si necesita un CSS personalizado para superar las cosas, use:

@media (max-width: 767px) {
.kt-gutter-wider:not(.kt-mobile-layout-row)>.wp-block-kadence-column {
    margin-right: 10px;
}
.kt-mobile-layout-two-grid.kt-gutter-wider>.wp-block-kadence-column {
    -ms-flex: 0 0 calc( 50% - 5px);
    flex: 0 0 calc( 50% - 5px);
}
}

Esta respuesta fue modificada hace 1 año, 12 meses. Razón: agregar una pregunta de medios a CSS Thread Starter

(@mowlman)

Hace 1 año, 12 meses

Muchas gracias por su apoyo.

¿Solucionó tu problema??

0 / 0

Deja una respuesta 0

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *