0

I'm trying to have responsive images in a 4 column layout with the same column height, but for some reason the images are breaking the entire layout if I don't set a specific height for them.

You can see the live working example here: http://atelierdunoir.aphelion.ga/reader/directory/

Here's the code that I'm using:

 <div class="container section-headline-wrap">
    <div class="section-headline">
      <h3>Oneshot Directory</h3>
     </div>
    </div>
    <div class="container hb-container" id="containera">

      <div class="row hb-row">

        <div class="col-md-12">
          <hr>
        </div>
     <?php
     foreach ($comics as $key => $comic) {
     echo '<div class="col-lg-3 col-md-4 col-sm-4 col-xs-6">';
     if($comic->get_thumb(true)) echo '<div class="thumbnail"><img class="img-
    responsive" src="'.$comic->get_thumb(true).'" />';
    echo '<div class="caption"><h4>' . $comic->name . '</h4>'; 
    echo '<div class="panel-footer"><a href="'. $comic->href() .'" class="btn btn-default btn-block">View Project</a></div></div></div></div>';
    }

echo prevnext('directory/', $comics);
?>
</div>
</div>

I'm using a comic software here: https://foolcode.github.io/FoOlSlide/

But this a custom theme that I'm working on.

Any ideas on how to have the same column height with responsive images? All images have been resized to 680px in height, but the widths vary.

Voidz
  • 33
  • 4

0 Answers0