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!
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 😉.
