1

I have a list loading with AngualarJS ng repeat. List contains images and title, like that. This is the code for the list.

<div class="row">
    <div ng-repeat="data in allStars">
        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a style="color: black" class="thumbnail" href="#/star/{{data.psid}}">
                <img class="img-responsive" src="lib/{{data.imagepath}}"
                     alt="">
                <div class="row thumbEffect">
                    <div class="col-lg-12">
                        {{data.psname}}
                    </div>
                    <div class="col-lg-12">
                        Views : {{data.views}}
                    </div>
                    <div class="col-lg-12">
                        Scenes : {{data.scenes}}
                    </div>
                </div>
            </a>
        </div>
    </div>
</div>

This is loading nicely in desktop versions. But in mobile versions, when the title is too long, it comes to two lines and so the image below that getting a big space. But I want to make it look as following image. When title getting long, other side images also getting same height. (There are two images in my site too in mobile view).

enter image description here

How can I do this ? With CSS and Javascript ?

Chanaka De Silva
  • 401
  • 9
  • 20

0 Answers0