Soporte » Diseño – Temas y plantillas » Las columnas no se apilan

  • Resuelto josefigueroa92

    (@josefigueroa92)


    Hola,

    Tengo un problema en la web https://tucasetadejardin.es/.

    El tema es que como pueden ver en la página de inicio tengo columnas tanto para el menú como para los clusters más abajo, y las tengo marcadas para que se apilen en móvil desde el editor.

    Sin embargo al entrar a mi web desde el móvil (o desde el navegador en modo incognito
    y con inspeccionar, con versión móvil) se ven las columnas finas alargadas y no apiladas. Vamos un desastre. No se que ha podido pasar, antes no estaba así. He probado a borrar cache por si era eso pero nada de nada.

    También he borrado el css que tenia personalizado y no ha resultado en ningún cambio.

    Alguien podría guiarme y decirme si es un fallo de wp o puedo hacer algo para solucionarlo?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • Moderador almendron

    (@almendron)

    Por lo que veo, tienes la propiedad «flex-wrap» definida como «nowrap». Tienes que cambiarlo a «wrap».

    .wp-container-5 {
    	display: flex;
    	gap: 2em;
    	flex-wrap: nowrap;
    	align-items: center;
    }
    .wp-container-16 {
    	display: flex;
    	gap: 2em;
    	flex-wrap: nowrap;
    	align-items: center;
    }

    https://developer.mozilla.org/es/docs/Web/CSS/flex-wrap

    Iniciador del debate josefigueroa92

    (@josefigueroa92)

    Hola @almendron
    Si lo se, ayer estuve probando a cambiar el css en inspeccionar y descubrí esto que me cuentas, por lo que copie este código y lo pegue en el css adicional de la personalización de wordpress.

    .wp-container-5 {
    	display: flex;
    	gap: 2em;
    	flex-wrap: wrap;
    	align-items: center;
    }

    Sin embargo aunque cuando lo cambiaba en la pantalla de inspeccionar, funcionaba como debía, al pegarlo en el css adicional, no cambiaba nada. Me podrías decir donde lo debo de cambiar? Perdona mi ignorancia, no se mucho sobre css.

    Iniciador del debate josefigueroa92

    (@josefigueroa92)

    Lo que no entiendo es porque cuando selecciono para ver la version movil en el ordenador me aprece en orden, aunque si lo hago con el modo incognito no me aparece mal. He limpiado cache y sigue apareciendo de la misma manera. No tiene mucho sentido…

    Moderador almendron

    (@almendron)

    Añade a CSS adicional

    .wp-container-5 {
    	flex-wrap: wrap !important;
    }
    
    .wp-container-16 {
    	flex-wrap: wrap !important;
    }

    A ver si así te funciona.

    Iniciador del debate josefigueroa92

    (@josefigueroa92)

    He conseguido solucionarlo de forma temporal añadiendo esto en el css adicional

    .wp-block-columns {
        display: flex;
        margin-bottom: 1.75em;
        box-sizing: border-box;
        flex-wrap: wrap!important;
        align-items: normal!important;
    }

    Pero ahora mi pregunta es:

    Es correcto esto? Le podrías echar un ojo por favor??

    Porque en esta web no salía así directamente y en otras paginas webs similares con el mismo tema y configuración estaba correcto?

    Que tiene de especial esta que no estaba configurado así si en las demás funcionaba bien?

    Lo puedo solucionar internamente de alguna manera?

    Moderador almendron

    (@almendron)

    Yo lo veo bien. Y si te funciona… no lo toques.

    Iniciador del debate josefigueroa92

    (@josefigueroa92)

    Buen consejo 😉
    Gracias por tu ayuda!!

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

Viendo 8 respuestas - de la 1 a la 8 (de un total de 8)
  • Debes estar registrado para responder a este debate.