Bloques no alineados (responsive)

  • Resuelto cmunozro

    (@cmunozro)


    hace 4 años, 6 meses

    Hola,

    Ante todo, decir que no soy ni programador, ni tengo conocimientos de css.

    En la web del enlace, tengo una breve descripción de las casas, dividido en 2 columnas, que constan de un header, parrafo y shortcode con un listado de iconos y texto.

    Cuando la resolucion de la pantalla disminuye, la alineación de los bloques cambia, el listado se desalinea, y queda poco estético, puesto que uno de los parrafos tiene más texto que el otro. Lo que me gustaría es que los headers, parrafos e iconos estuvieran siempre alineados, independientemente de la pantalla.

    La manera como he intentado solucionarlo es con CSS-HERO, poniendo a ambos parrafos las misma altura minima a ambos, de la siguiente manera

    @media screen and (max-width:1024px) {
	.wp-block-column p {
		min-height: 240px;
	}
}
@media screen and (max-width:768px) {
}

    Esta solución me sirve relativamente, puesto que en los dispositivos móviles con pantalla pequeña, mantiene esa altura minima de 204px, y queda bastante mal tambien.

    No se si más alla de cambiar las css y el tema, si existe otro tipo de bloque que sirva mejor para esta estructura de pagina que quiero mostrar.

    • Este debate fue modificado hace 4 años, 6 meses por jose64. Razón: Etiquetar código

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

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • Iniciador del debate cmunozro

    (@cmunozro)

    hace 4 años, 6 meses

    Para ayudar a la respuesta, cuelgo un screenshot (https://prnt.sc/utyg1b) con el pantallazo.

    Como pueden observar, son 2 columnas, cada una con 3 bloques. Me gustará que en la medida de lo posible, estuvieran alineados con su «homologo» de la otra columna, independientemente de la longitud del texto que se escriba.

    Moderador jose64

    (@jose64)

    hace 4 años, 6 meses

    Hola.

    Bienvenido al foro de soporte. En la segunda media query no definiste ninguna regla, así que es como si no la escribieses. Tienes que poner las reglas correspondientes, un este caso la altura mínima, sino te toma la regla anterior.

    Coméntanos si tienes alguna duda y, por favor, recuerda cerrar el debate marcándolo como resuelto cuando así sea, de esta forma nos ayudas a mantener el foro al día.

    Iniciador del debate cmunozro

    (@cmunozro)

    hace 4 años, 6 meses

    Entendido…

    Es como me lo ha escrito CSS HERO, puesto que yo lo hago con el interfaz WYSIWYG dado que sé poco o nada de programación. Intentaré ponerlo a capón en los CSS, a ver si no me trastoca toda la web.

    También quería conocer si la manera de afrontar este tipo de LAYOUT es con GRID en lugar de COLUMN, y si WP digiere bien los GRID.

    Gracias,

    • Esta respuesta fue modificada hace 4 años, 6 meses por cmunozro.
    Moderador jose64

    (@jose64)

    hace 4 años, 6 meses

    Hola.

    Pues será que no definiste la altura para dispositivos móviles, seguramente por eso no te pone nada, empieza revisando eso.

    También quería conocer si la manera de afrontar este tipo de LAYOUT es con GRID en lugar de COLUMN, y si WP digiere bien los GRID.

    WordPress no tiene problemas con el CSS, eso es cosa del navegador. La definición del layout la hace el tema.

    Iniciador del debate cmunozro

    (@cmunozro)

    hace 4 años, 6 meses

    Sospecho que la solución a mi problema no es mediante asignación de alturas minimas a un bloque, sino que se alineen bien las filas dentro de las columnas. Creo que la manera de hacerlo bien es con un grid, pero aun sin estar seguro que sea la manera correcta, no sé como insertarlo con el editor de bloques de WP.

    Moderador jose64

    (@jose64)

    hace 4 años, 6 meses

    Si con una línea de CSS lo resuelves, ¿por qué te empeñas en hacerlo complicado?, más aún cuando tú mismo dices que tienes que usar CSS Hero porque no controlas CSS.

    Si asignas una altura mínima superior a la mayor lo tienes resuelto, asígnale una clase especial y dale el tamaño que te haga falta.

    Si quieres hacerlo con Grid, por aquí te dejo la información:

    Using CSS Grid for Gutenberg Columns

    Bringing CSS Grid to WordPress Layouts

    Grids: Layout builder for WordPress

    Si estuvieses maquetando una página entera o fuese un diseño de plantilla entiendo que quieras hacerlo así, pero para un detalle como el que necesitas no tiene sentido meterse en tantas complicaciones, sobre todo cuando ya lo resolviste escribiendo un poco más de texto para igualar.

    Iniciador del debate cmunozro

    (@cmunozro)

    hace 4 años, 6 meses

    tienes toda la razon…. exceso de celo.

    Ya está solucionado

    Cierro el post

Viendo 7 respuestas - de la 1 a la 7 (de un total de 7)
  • El debate ‘Bloques no alineados (responsive)’ está cerrado a nuevas respuestas.