Search code examples
javascripthtmlcssautoscaling

Div's Content Autoscaling with another Div Content

I would like to avoid this CSS Autoscaling bug that leaves huge blanks for long movie names. Would someone help me how to solve it? Here is my DIV and CSS code.

enter image description here

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%;
}
Solution

  • You can use flexbox to solve the issue

    .w3l-movie-gride-agile{ display:flex; justify-content:space-around; align-items:space-between; width:100%; height:500px}