• welcomedigital

    (@welcomedigital)


    Hola! Estoy creando una página personalizada para las entradas de blog y tengo el problema de que las entradas me aparecen con diferentes alturas en cada columna y además tampoco consigo alinear la imagen con el título y el extracto de la entrada que aparecen debajo. He probado con muchos códigos diferentes pero nada. Además, ¿hay alguna forma de hacerlo responsive? Gracias.

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

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • Hola @welcomedigital!

    Para empezar yo eliminaría todo el código CSS que has metido en el personalizador o a mano y metería, a nivel ‘ul’ del div que tienes marcado como ‘entradasblog’ algo así:

    .entradasblog>ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        list-style: none;
        margin: 0;
        gap: 2em;
    }

    De esta forma ya tienes la rejilla y los posts en dos columnas (o las que entren desde 250px mínimo de ancho, si lo quieres más ancho cambias ese parámetro).

    Luego, en la imagen, puedes hacer algo como:

    .entradasblog a.rpwe-img {
        width: 100%;
        height: 350px;
        overflow: hidden;
        display: block;
    }
    .entradasblog a.rpwe-img>img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    Siempre y cuando quieras que las imágenes sean siempre del mismo alto, en caso contrario, esto no te haría falta.

    Lógicamente, este código es una base y puede no tener el resultado exacto de lo que necesitas, pero te puede dar una base para que puedas seguir a partir de ahí.

    Espero que te sirva!

    Iniciador del debate welcomedigital

    (@welcomedigital)

    Hola Diego, muchas gracias me ha funcionado bien. Lo único que ahora el diseño no se me hace responsive y en dispositivos móviles se sale mucho de la pantalla. ¿Cómo lo puedo solucionar? Gracias

    Hola @welcomedigital !

    Por lo que veo el diseño sí que se te hace responsive (se colapsa con el redimensionado de la pantalla) pero veo que tienes un problemilla con las imágenes, has fijado un ancho específico en el «.entradasblog a.rpwe-img». Si te fijas en el código que yo te puse, el ancho es el 100% de la entrada, no «650px» ya que esto hace que SIEMPRE sea ese ancho y, por tanto, desbordará y no se mostrará correctamente.

    Sustituye ese valor y tendrás imágenes responsive.

    Como consejo… no subas imágenes con «laterales» en blanco ya que parecerá que no ocupan el 100% de ancho pero sí que lo son 😉.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • El debate ‘Alinear imagenes y texto con CSS’ está cerrado a nuevas respuestas.