0

I'm currently playing around with the Riot Games API, I'm using bootstrap to manage the grid of "Champions" these images are loaded from Riot's imagebase but some (4-5) are 1px lower than the rest.

This breaks the grid, and since the images change height based on screen width I can't set a height to fix it, I'd rather not use JS or jQuery to calculate a height for every image on every width change, so I'm wondering if anyone have a slick fix for this with css or bootstrap classes alone.

The page is www.mathias-syversen.net

<div class="row">
<?php foreach ($champs as $champ) { ?>
    <div id="id-<?php echo $champ[id] ?>" class="champion col-xs-6 col-sm-4 col-md-3 col-lg-2">
        <div class="thumbnail">
            <a href="/page/champion.php?id=<?php echo $champ[id] ?>">
                <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/<?php echo $champ[key] ?>_0.jpg" alt="<?php echo $champ[name] ?>">
                <div class="name-tag"><?php echo $champ[name] ?></div>
            </a>
        </div>
    </div>
<?php } ?>
</div>
kguest
  • 3,804
  • 3
  • 29
  • 31
Mathias Syversen
  • 51
  • 8

2 Answers2

0

You need to use same height's images or need to define a same height for all the images.

6th images is sized with 307*557 and rest of are different sizes.

<div class="thumbnail fix_block"> 
    <a href="/page/champion.php?id=78"> 
        <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Poppy_0.jpg" alt="Poppy">
        <div class="name-tag">Poppy</div>
    </a>
</div>

/* and into stylesheet */

.fix_block{height:350px}

or you need to put fix number of div with class = "col-*" into single div with class="row"

Manoj Meena
  • 244
  • 1
  • 5
  • I know I can force a height to fix the breaking, but that wont work when the site scales. If I use a set number of div's inside a row there is no point in using bootstrap. and the "Rows" will not have an even number when the site scales. What I'm looking for is some kind of trick with margin / padding or other css (maybe a psuedo element) to fill out that one pixel where its needed. If no such workaround exists, I might have to fix it in JS. – Mathias Syversen May 29 '15 at 07:51
0

If you can apply jquery you can use match height jquery plugin from following link

http://brm.io/jquery-match-height/ Demo: http://brm.io/jquery-match-height-demo/

To make it match height put class like -- item on items you want same height. With following code innitiated sample after including library from link above

$(function() {
    $('.sameHeight .item').matchHeight();
 })

Hope this helps

Fayaz
  • 33
  • 1
  • 5