Problema com Columns no Elementor: Ajuda Necessária

  • Autor Autor cris147
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
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 o anexo 619071


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

Ver o anexo 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 o anexo 619080
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
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 o anexo 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 o anexo 619071


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

Ver o anexo 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 o anexo 619080
Creo que no debes duplicar la seción interior. Sino las columnas de la sección interior. Fijate aqui

Ver o anexo 619664
Luego le da en "Movil" el ancho en porcentaje que deseas para cada "columna de la sección interior".
 
Voltar
Topo