Error en imágenes de Divi, ¿cómo lo soluciono?

Amigos estoy usando Divi theme y Codesnippets para armar un poco mi sitio web de peliculas pero resulta que no se reflejan mis posters alguno me tira el tip de la solución.

www.cimax.site

Nikkygeek dijo:

Amigos estoy usando Divi theme y Codesnippets para armar un poco mi sitio web de peliculas pero resulta que no se reflejan mis posters alguno me tira el tip de la solución.

www.cimax.site

Hacer clic para expandir...

Ponle el height al class ".cs-poster"

YeltsinReyes dijo:

Ponle el height al class ".cs-poster"

Hacer clic para expandir...

Que es lo que supuestamente hace?

add_action('wp_head', function() { ?>
<style>
.cs-grid-wrap { max-width:1400px; margin:0 auto; padding:20px; }
.cs-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:18px; }
@media(max-width:1400px){.cs-grid{grid-template-columns:repeat(6,1fr);}}
@media(max-width:1100px){.cs-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:768px){.cs-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.cs-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:360px){.cs-grid{grid-template-columns:1fr;}}
.cs-item {}
.cs-poster {
position:relative;
overflow:hidden;
border-radius:6px;
background:#000;
height:400px; /* 🔹 altura fija al contenedor */
}
.cs-poster img {
width:100%;
height:100%; /* 🔹 ahora la imagen ocupa todo el alto del contenedor */
object-fit:cover;
display:block;
}
.cs-title {
text-align:center;
margin-top:8px;
font-weight:600;
font-size:14px;
color:#111;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.cs-pagination {
display:flex;
justify-content:center;
align-items:center;
gap:14px;
margin-top:22px;
flex-wrap:wrap;
}
.cs-pagination .cs-btn {
padding:8px 14px;
border-radius:6px;
background:#111;
color:#fff;
text-decoration:none;
font-weight:600;
}
.cs-pagination .cs-btn.disabled {
background:#777;
opacity:.6;
pointer-events:none;
}
.cs-pagination .cs-page {
padding:6px 12px;
background:transparent;
color:#111;
font-weight:700;
}
</style>
<?php });

Eso mismo
height:400px; /* 🔹 altura fija al contenedor */

Ok, pero ahora me salen todas las portadas en diferentes tamaños...

1. A simple vista no tienen dimensión, mas lo que abarca el enlace

2 <div class="cs-grid"> tiene 1039px x 579px

3. cs-item no tiene dimensión, nada, solo la dimensión del enlace
.cs-item {
}

4. .cs-poster { no tiene dimensión

5. imágen tiene :
.cs-poster img {
width: 100%;
height: 400px;
...


<div class="cs-grid">
<article class="cs-item">
<a href="/peliculas/exterminio-la-evolucion-2025/" style="text-decoration:none;color:inherit;">
<div class="cs-poster">
<img decoding="async" src="/wp-content/uploads/2025/08/28-anos-despues-2025.jpg" alt="xxx">
</div>
<div class="cs-title">Exterminio: La evolución (2025)</div>
</a>
</article>
...
<article class="cs-item">...</article>
<article class="cs-item">...</article>
...
</div>


6 entonces a cs-item le pones:
.cs-item {
width: 150px;
height: 200px;
}

a cs-poster width 100%, pero en height menos de 200px, para que quepa la imágen y abajo el enlace , por ejemplo :
.cs-poster {
position: relative;
overflow: hidden;
border-radius: 6px;
background: #000;
width: 100%;
height: 170px;
}

quitas lo que tienes duplicado en
.cs-poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

y pones un solo css para .cs-poster img con
.cs-poster img {
width: 100%;
height: auto;
}

y listo...

Puko dijo:

1. A simple vista no tienen dimensión, mas lo que abarca el enlace

2 <div class="cs-grid"> tiene 1039px x 579px

3. cs-item no tiene dimensión, nada, solo la dimensión del enlace
.cs-item {
}

4. .cs-poster { no tiene dimensión

5. imágen tiene :
.cs-poster img {
width: 100%;
height: 400px;
...


<div class="cs-grid">
<article class="cs-item">
<a href="/peliculas/exterminio-la-evolucion-2025/" style="text-decoration:none;color:inherit;">
<div class="cs-poster">
<img decoding="async" src="/wp-content/uploads/2025/08/28-anos-despues-2025.jpg" alt="xxx">
</div>
<div class="cs-title">Exterminio: La evolución (2025)</div>
</a>
</article>
...
<article class="cs-item">...</article>
<article class="cs-item">...</article>
...
</div>


6 entonces a cs-item le pones:
.cs-item {
width: 150px;
height: 200px;
}

a cs-poster width 100%, pero en height menos de 200px, para que quepa la imágen y abajo el enlace , por ejemplo :
.cs-poster {
position: relative;
overflow: hidden;
border-radius: 6px;
background: #000;
width: 100%;
height: 170px;
}

quitas lo que tienes duplicado en
.cs-poster img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

y pones un solo css para .cs-poster img con
.cs-poster img {
width: 100%;
height: auto;
}

y listo...

Ver el archivo adjunto 1511765

Hacer clic para expandir...

Cual ahi que cambiar para redimencionar los posters?

Nikkygeek dijo:

Cual ahi que cambiar para redimencionar los posters?

Hacer clic para expandir...

lol, por lo que leo no entendiste nada...
no es solo cambiar un valor y ya, tienes que darle dimensión a los divs donde esta la imágen y el enlace,
ya que con solo porcentajes no se va a ver...

aquí tienes
tu div cs-grid de 1039px x 579px
y los enlaces <a href=" que se "estiran" según el texto,
por eso se salen del div cs-grid



entonces cada cs-item tiene la dimensión del enlace,
cs-item no tiene width ni height



por eso .cs-poster no tiene height , solo el width del enlace <a... width 203 x 0



por lo que .cs-poster img no se ve con esos datos css




lo que tienes que hacer primero es ver cómo esta el código


entonces primero le pones dimensión a .cs-item, con width 150 ya no se salen de cs-grid
.cs-item {
width: 150px;
height: 200px;
}



después a cs-poster width 100%, pero en height menos de 200px, para que quepa la imágen y abajo el enlace :
.cs-poster {
position: relative;
overflow: hidden;
border-radius: 6px;
background: #000;
width: 100%;
height: 170px;
}



ahora con eso ya se ve la imágen y ya puedes ajustar "cs-poster img", peroooo, tienes doble .cs-poster img



para eso eliminas los dos .cs-poster img y haces uno nuevo con
.cs-poster img {
width: 100%;
height: auto;
}

con height auto o 100% y width 100% la imágen ya se expande a la dimensión de .cs-poster



entonces si me preguntas

Nikkygeek dijo:

Cual ahi que cambiar para redimencionar los posters?

Hacer clic para expandir...

No es solo cambiar un solo valor, sino, hacer bien tu código para que se acomode los "posters" 🤭 🫠

bueno entra al sitio y mira como me quedo estoy haciendo todo mal!!! jajajajajja buenos humos!

Nikkygeek dijo:

bueno entra al sitio y mira como me quedo estoy haciendo todo mal!!! jajajajajja buenos humos!

Hacer clic para expandir...

lol,

tienes doble ".cs-poster img",
si ya alineaste los cs-item en .cs-grid, ya no ocupas hacerlo en en cada cs-item,
si no sabes usar medidas fijas y/o por porcentajes, menos con aspect-ratio
etc, etc

Me lo regalas arreglado porque no lo encuentro el codigo entero en algun copypaste por favor.

Nikkygeek dijo:

Me lo regalas arreglado porque no lo encuentro el codigo entero en algun copypaste por favor.

Hacer clic para expandir...

¿queeee?
lol
vuelve a leer lo que te puse, ahi esta desde el principio que códigos vas agregando y quitando

¿todavia no la arreglas? 🤭