Vertically align buttons below caption to longest text of three captions

Question

Just started creating a website in WordPress with Bootstrap 4 and I've been puzzling on an issue for days now.

I'm trying to vertically align read more buttons for a 'related posts' section on a website. I want to have the read more button automatically aligned to the longest caption text. I've tried multiple ways with relative/absolute, but I can't seem to get it to work.

Here is my current code:

<div class="row">
    <?php $cat = new WP_Query( 'cat=6&posts_per_page=3' ); ?>
    <?php while($cat->have_posts()) : $cat->the_post(); ?>
        <div class="col-xs-12 col-md-4 readmore">
            <img class="w-100" src="<?php the_post_thumbnail_url(); ?>">
            <div class="col-12" style="margin-top:15px;">
                <h2 class="h6 text-uppercase text-center text-nowrap"><strong><?php the_title(); ?></strong></h2>
                <p><?php the_content(); ?></p>
                <p><?php //the_excerpt(); ?></p>
            </div>
            <div class="col-6 mx-auto" style="bottom: 10px;margin-bottom: 20px">
                <a href="<?php the_permalink(); ?>" class="d-block btn btn-secondary btn-sm">Read More</a>
            </div>    
        </div>
    <?php endwhile; ?> 
</div>
<?php wp_reset_postdata(); ?>

And this is how it look currently:

The thing that makes the even more difficult is that ideally it should still be responsive. So on a smaller screen the buttons should be directly after the caption, like this:

Hopefully it's clear what the problem is and hopefully someone can share their thoughts. Thanks in advance!

score 0 · Answer 1 · answered Aug 10 '18 at 19:42

You will need to specify a div where all child elements are of equal height. I believe there are some features for responsive design too. Check this article out:

How do I keep two side-by-side divs the same height?

The top comment under the answer suggests: If you are developing a responsive design and you want your second div to go down in smaller screens you will need to set .row to display: block; in your media query.

I will run some testing for you now and post the code snippet

Ah yes, flex was the search word I needed ;) Bootstrap has a large section on flex layout. I'll dive into that. Thanks for pointing me in the right direction! — PeterP, Aug 10 '18 at 20:05

score 0 · Accepted Answer · answered Aug 12 '18 at 17:33

You don't need all child elements to initially be the same height. You can use flexbox to achieve the desired results you are looking for.

Here is a link to a codepen that shows the solution and there is an explanation below. https://codepen.io/sugarbuzzdesigns/pen/ZjwQZb

Create a container that will contain all of your posts. This should be set to display: flex. Set the flex direction to column so we can set it to row on larger screens with a media query.
Create containers for each post. These posts are the flex items in the container we just created
Wrap your image, title, and content in one div so it can be evenly spaced separately from the read more button
Now you can set each post to flex: 1 so they take up equal space. Next you can set each post to flex-direction: column and justify-content: space-between.

HTML

<div class="container">
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis expedita laudantium ut earum sint, numquam adipisci autem cupiditate dolorem aspernatur illo laboriosam, dolores quis? Perspiciatis debitis nesciunt corporis dicta eveniet!<p>
    </div>
    <a href="#">Read More</a>
  </div>
  <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
    <div class="blog-post">
    <div>
      <h3>Heading Here</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat explicabo cumque reiciendis error hic soluta rem enim amet laborum consequuntur, delectus mollitia molestiae maiores ullam possimus non corporis. Animi, sit.<p>
    </div>
    <a href="#">Read More</a>
  </div>  
</div>

CSS

.container {
    display: flex;
}

@media (min-width: 600px) {
  .container {
     flex-direction: row;
  }
}

.blog-post {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
}

Vertically align buttons below caption to longest text of three captions

2 Answers2