Solucionando un problema CSS en post relacionados responsivos

  • Autor Autor José Jiménez
  • Fecha de inicio Fecha de inicio
José Jiménez

José Jiménez

Eta
Verificación en dos pasos activada
Verificado por Whatsapp
Que tal betas, estoy trabajando en un nuevo proyecto y me he encontrado con un problema que no puedo solucionar.
Ya he agregado los post relacionados con thumbs y se muestran correctamente cuando ingresas vía web. El problema viene cuando el diseño se hace responsivo, en este caso, para un celular, me explico, así se muestra cuando ingresas por web.
relacionados1.webp

Y así se muestra cuando ingresas desde un móvil, si pueden observar, me carga los elementos a la izquierda y como el ancho está en 48% me deja la otra mitad vacía.
FullSizeRender (1).webp

Lo que estoy buscando es que al ingresar desde un movil se vea algo así (a todo el ancho del dispositivo, osea, responsivo)
FullSizeRender.webp
Se que el problema anda en el CSS y por eso dejo aquí el CSS.

CSS de los post relacionados.
Insertar CODE, HTML o PHP:
#related_posts {
    display:block;
    clear:both;
    margin-top:15px;
}
 
#related_posts .item {
    width:48%;
    margin-bottom: 10px;
    padding-bottom: 10px;
    float: left;
    margin: 6px;
    border-bottom: 2px  #efefef solid;
}
 
#related_posts .item h3 {
    font-size:19px;
    }
 
#related_posts .item img {
    width:100%;
    padding: 4px;
    margin: 0 auto;
    background: #f2f2f2;
}

Cabe aclarar que los post relacionados en HTML, están dentro de una etiqueta <section></section>
Gracias por la atención, saludos :encouragement:
 
El problema es que no has añadido CSS Media Queries, y el div padre de la imagen sigue siendo 48% de width desde cualquier resolución de pantalla.

Lo que tienes que hacer es insertar una media querie hasta la resolución que tu quieras, por ejemplo.

Insertar CODE, HTML o PHP:
 @ media (max-width: 720px) {
    #related_posts .item {width: 100%;}
}

Con el @ media, junto. (que me linkea a un perfil si lo junto ... )

Saludos.
 
Última edición:
Muchas gracias [MENTION=83700]nasti[/MENTION], he probado con los queries y ha quedado perfecto, un saludo :encouragement:
 
Atrás
Arriba