[Resolved] How to make row heights the same across a grid

[Author]

Posts

[Alan]

I am trying to: create a view to display a post archive. It's using a very simple content template showing the post title, with the featured image.

It all looks perfect unless there is a post title which is longer than average. This has the effect of pushing the title area down, and nudging the image down, making it all look messy.

Screenshot attached, you can see the third column title is longer.

It would be useful to be able to increase the title height of the other cells in that row to match the larger one.

How to do that please?

My content template is very simple:

<div class="container">
  <div class="title">
    [wpv-post-link style="text-decoration: none;"]
  </div>
  [wpv-post-featured-image size="cathposts"]
</div>

CSS:

.container {
  float: left;
  width: 31.623931623931625%;
}

.container img{
 border-radius: 0px 0px 8px 8px; 
}

.title {
  background: #F0FFFF;
  padding: 10px;
  text-align: center;
}

Is there a quick fix for this? I'm guessing it's a common issue.
thanks
Alan

[Minesh Supporter Languages: English (English ) Timezone: Asia/Kolkata (GMT+05:30)]

Hello. Thank you for contacting the Toolset support.

I don't think that's a correct way to fix your issue. Instead of increasing height what I can suggest is a better solution is that you should fix the number of characters to display with your title.

If you agree on this, please add following code to current theme's functions.php file.

add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
  $content = wpv_do_shortcode($content);
  $length = (int)$atts['length'];
  if (strlen($content) > $length) {
    $content = substr($content, 0, $length) . '…';
  }
  return $content;
}

Call it within your views as follows:

[trim length="50"][wpv-post-title][/trim]

Where:
You can adjust the number of characters using "length" attribute.

[Alan]

Thanks for your input Minesh, much appreciated.