0

me encantaría evitar este error de Auto escalamiento con CSS que deja unos enormes espacios en blanco por los nombres largos de las películas. Alguien me ayudaría a como resolverlo? Aquí les dejo mi código del DIV y el CSS

introducir la descripción de la imagen aquí

HTML

<div class="col-md-2 w3l-movie-gride-agile">
                                <a href="single.html" class="hvr-shutter-out-horizontal"><img src="imagen/malefica.jpg" class="img-responsive" />
                                    <div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
                                </a>
                                <div class="mid-1 agileits_w3layouts_mid_1_home">
                                    <div class="w3l-movie-text">
                                        <h6><a href="single.html">Maléfica: La dueña de Mal</a></h6>                            
                                    </div>
                                    <div class="mid-2 agile_mid_2_home">
                                        <p>2019</p>
                                        <div class="block-stars">
                                            <ul class="w3l-ratings">
                                                <li><a href="#"><i class="fa fa-star" aria-hidden="true"></i>7.4</a></li>
                                                
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div class="ribben">
                                    <p>NEW</p>
                                </div>
                            </div>

CSS

.w3l-movie-gride-agile {
    text-align: center;
    box-shadow: 0px 0px 10px rgb(255 255 255 / 35%);
    margin-right: 0%;
    margin-bottom: 3%;
    position: relative;
    padding-left: 0;
}
.col-md-2 {
    width: 16.66666667%;
}
3
  • todos los div "col-md-2 w3l-movie-gride-agile" deben tener height: 100%. el 3 jul. 2021 a las 16:53
  • Te refieres que debo cambiar todos los div a height: 100% ? el 3 jul. 2021 a las 18:11
  • Me parece que estás usando float para posicionar los elementos; te sugiero cambiar a flex
    – Triby
    el 3 jul. 2021 a las 20:29

1 respuesta 1

1

mmmm no esta claro tu pregunta, pero creo que podrias solucionarlo con

overflow: hidden o final de cuentas dandole un max-height: 200px por poner un ejemplo

3
  • No, no me funciona. pero gracias por ayudar. Te daré la palomita el 4 jul. 2021 a las 20:46
  • Envia el codigo completo y te lo solicionare, es que no esta claro el codigo actual para replicar el problema, podrias usar CodePen
    – asbelar
    el 5 jul. 2021 a las 13:36
  • Ya lo pude resolver, muchas gracias :) el 5 jul. 2021 a las 23:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.