Seeking help making a CSS adjustment to box height

[Deaf_Guy]

Hi - hoping someone can help me with this.

https://www.perque.com/test-testimonials

The above page I put into DW to try to make an adjustment. This is a WP page with a supposedly friendly plugin that looks similar to Adobe Premiere's timeline layout. I got the page set up using a template from the plugin but am trying to make all of the rounded corner boxes the same height as the 2nd and 3rd ones - definitely not the first one [with red BG]. The "support" team for this plugin has been telling me to try this and that but nothing works. They told me to adjust the text layer and that definitely doesn't work. They make the SW for goodness sake buy don't know how to help me LOL.

This plugin allows you to add CSS but I even tried to find the appropriate code out of DW and using Inspect but it acts weird there because every time I select the box and go down to get the code, it changes. So hoping someone can help. And one other important thing - if you look at the page on a phone, it looks good there too, especially the 2nd and 3rd trstimonial boxes. However, if I add code to fix the height of all of the boxes, it obviously would have to still look good on phones too.

Any help is greatly appreciated. Thank you.

[Nancy OShea · Accepted solution]

Ask the plugin maker.  It's unclear from the code if layout is coming from CSS or JS code.  

Height is never expressed in explicit values because content inside it varies as do viewport sizes. Boxes must remain flexible.

Equal height columns are fairly easy to achieve with simple CSS Flexbox like this:

<style>
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
</style>

<h2>Equal Height Columns with Flexbox</h2>
<p>Make the columns match the height of the tallest column.</p>

<div class="col-container">
<div class="col" style="background:orange">
<h2>Column 1</h2>
<p>Hello World</p>
</div>

<div class="col" style="background:yellow">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>

<div class="col" style="background:orange">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>

Hope that helps.

[Deaf_Guy]

Thank you so much really appreciate it.