Problema con Columns en Elementor: Ayuda Necesaria

  • Autor Autor cris147
  • Fecha de inicio Fecha de inicio
C

cris147

Buenas, no soy muy experto en Elementor pero me ha tocado armar una landing page y me he encontrado con un problema.

Tengo una sección interior con 5 Columnas: (20% cada una)

Ver el archivo adjunto 619071


La cual he duplicado para utilizarla abajo y así sucesivamente:

Ver el archivo adjunto 619073

El problema es cuando
quiero poner que en movil se vean en 2 columnas y se ve de la siguiente manera: (Al ser 5 columnas en PC, al ponerlo en movil hay un espacio vacio)

Y al hacer un copy paste, cada 4 elementos, uno esta solo. ( No se ordenan y sube el primer elemento de la siguiente sección)

Alguna manera de poder solucionarlo? Cualquier ayuda es bienvenida, muy agradecido.


(50% cada una)
Ver el archivo adjunto 619080
 
1634754656960-png.619071

Crea 2 de estos de 4
y uno de 2 (jefes o los más importantes)


Porque la solución fácil es quitar uno y pasarlo al otro 4/6 pero el de 6 quedarían en margen menor del 18% y muy feo
 
Cada fila tiene su propio contenedor y por lo tanto no te va a subir la columna que esta dentro de otro contenedor. Lo mas sencillo es utilizar columnas con numeros pares y te quitas de problema.

Si a fuerza necesitas que tengan 5 columnas en desktop, lo que podrias hacer es crear un row de una sola columna y agregar ahi los 10 miembros (o los que necesites) utilizando las inner sections (a juzgar por tu layout, serian inner sections de una columna tmb).

A la columna principal le agregas una clase, por ejemplo "team-members" y a todas las inner sections les agregas otra clase, por ejemplo "member-item" y ya el width lo manejas por CSS, asi podras controlar a voluntad el espacio que tendría cada columna y no se rompería el ritmo aunque sea numero par o impar.

El código seria algo asi:
CSS:
/* Mobile */
.team-members .member-item {
    width: 50% !important;
}
/* Tablet */
@media (min-width:768px) {
    .team-members .member-item {
        width: 33.333% !important;
    }
}
/* Desktop */
@media (min-width:1025px) {
    .team-members .member-item {
        width: 20% !important;
    }
}

Y esta seria la estructura que tendría tu pagina:

Ver el archivo adjunto 619432
 
Cuando tengo ese tipo de conflictos en Elementor para no complicarme la vida hago dos o tres versiones dentro de la misma página:

  • PC
  • Tablet
  • Móvil
 
Buenas, no soy muy experto en Elementor pero me ha tocado armar una landing page y me he encontrado con un problema.

Tengo una sección interior con 5 Columnas: (20% cada una)

Ver el archivo adjunto 619071


La cual he duplicado para utilizarla abajo y así sucesivamente:

Ver el archivo adjunto 619073

El problema es cuando quiero poner que en movil se vean en 2 columnas y se ve de la siguiente manera: (Al ser 5 columnas en PC, al ponerlo en movil hay un espacio vacio)

Y al hacer un copy paste, cada 4 elementos, uno esta solo. ( No se ordenan y sube el primer elemento de la siguiente sección)

Alguna manera de poder solucionarlo? Cualquier ayuda es bienvenida, muy agradecido.


(50% cada una)
Ver el archivo adjunto 619080
Creo que no debes duplicar la seción interior. Sino las columnas de la sección interior. Fijate aqui

Ver el archivo adjunto 619664
Luego le da en "Movil" el ancho en porcentaje que deseas para cada "columna de la sección interior".
 
Atrás
Arriba