1

I want a row with 3 columns, that depending on the length/size of the text inside of one of the columns, all 3 columns should have the same height. So, the 3 columns should have the same height and be in the same row taking into account the biggest sized column.

This is the error that I get:

http://prntscr.com/d4getm

This is the code that I have: 

<?php// Define our WP Query Parameters ?>
<?php $the_query = new WP_Query( 'posts_per_page=3' ); ?>

<?php// Start our WP Query ?>
<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

      <div class="col-sm-6 col-md-3">

<div class="thumbnail"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(100, 100)); ?></a>
<div class="caption">            
<?php// Display the Post Title with Hyperlink?>
<h3 class="center"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>



<!--// Repeat the process and reset once it hits the limit-->
</div>    
</div>    
</div>

<?php
endwhile;
wp_reset_postdata();
?>

And this is the CSS:

div.caption{
    text-align: center;
}
div.thumbnail{
    border: 4px inset black;
    height: 200px;
}
h3.center{
    font-size: 20px;
}
FilT
  • 192
  • 4
  • 13
  • Check out this question: http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Asher Nov 08 '16 at 06:03
  • Hi, I saw that post as well but neither of the solutions fixed the problem. Some didn't evenly distribute the columns, others simply didn't work. – FilT Nov 09 '16 at 00:11

1 Answers1

2

The answer is found here: How can I make Bootstrap columns all the same height?

For this particular problem some adjustments need to be made to the html structure in order to get it to work.

I've replicated what I imagine your final html looks like once the php is executed. Here's a js fiddle: https://jsfiddle.net/qpwgkgfe/39/

UPDATE: Here is jsfiddle solution made responsive using bootstrap classes: https://jsfiddle.net/qpwgkgfe/44/

Basically, there are a few things you need to remove. First is the internal div with class thumbnail. You can get the same effect by moving the class to the parent div. Secondly, you need to remove the height: 200px from your CSS file. This setting will over-ride the attempts to make the columns match.

I've used the flex-box approach because it's new and fun, but with some adjustments the other solutions would work as well.

Here's another js fiddle using the -margin approach: https://jsfiddle.net/v92g0ddk/3/

You'll need to work out the bottom border though.

Community
  • 1
  • 1
Asher
  • 677
  • 5
  • 10
  • Thank you for your answer, but what I want is that if one of the columns has more text, the other columns should adjust in height to that taller column. I want the 3 columns in the same row, not in separate rows. Can you help me adjust the 3 columns in height and not in width? – FilT Nov 11 '16 at 23:41
  • I'm not sure that you've looked at the https://jsfiddle.net/gpwgkgfe/39/ link. Try changing the text in one column then click update and run. The three columns will adjust their size. Can you explain to me what you mean by 'the same row'. In terms of bootstrap the above examples are considered to be in the same row.\ – Asher Nov 14 '16 at 22:09
  • Ok, I think I understand. You were looking at the solutions of a small display. I fixed the bootstrap for a md sized screen. I've updated the answer with a responsive version. – Asher Nov 15 '16 at 04:40