Callout module - equalize column heights not working

Beaver Builder
1

Hi all, have been messing around with this issue for a while now. The callout modules on the page (5 column) are ignoring equalise column height.

Have even resorted to trying to increase/decrease the length of titles and blurb text to make them as similar as possible in length. It’s just not possible. As soon as we reduce / increase the size of the window they appear misaligned.

This is cause by either the titles going from 1 line to two lines to three lines at different points.

I’ve tried he other suggestion on the forums of changing the break point. This does not work…it’s just inconsistent not matter what I do.

We just need the buttons, titles and text to stay in alignment not matter the screen size or move into single column view when on a small device.

2

[Content Hidden]

3

Hey craig,

The height of columns are equal, try placing a different background color for each and you’ll see what I mean. If you need the buttons, titles and texts to stay aligned, you’ll need custom CSS to achieve that. I’ll check with my team to see if they have a better idea for this. Meanwhile, I have some CSS snippets below that you might want to give it a try. Replace this class “.fl-node-5651600cb69a6” with a custom class for the column with equal heights.

.fl-callout-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.fl-node-5651600cb69a6 .fl-callout-text p {
   height: 100px;
    overflow: auto;
    text-overflow: ellipsis;
}

Thanks!

KC

4

Hi KC. Yes you’re right - I should have been more specific. The solution i’m after then is to ensure that the buttons stay horizontally aligned along with the title areas.

Any assistance with this is much appreciated.

5

Hey craig,

Sorry about that. Try the CSS snippet below and see if it’s what you’re looking for. :slight_smile:

@media screen and (max-width: 1317px) {
 .fl-builder-content .fl-callout-title {    
    height: 60px;
 }  
 .fl-builder-content .fl-callout-text p {
    height: 130px
 }  
}

Thanks!

KC

6

Hi KC, this appears to have made an improvement on the resizing…hard to explain, but it’s not as jaggy when checking by resizing my browser window.

7

Hey craig,

Should you require any further assistance, please let us know. :slight_smile:

Thanks!

KC

8

Hi KC,
I’m having a similar issue and I think it is probably all about expectations.

I think when someone selects the option to equalise the height, they expect the buttons at the bottom to line up. I’ve created a separate row now with buttons that do line up, but I’m conscious that this would result in an odd sequence of content on very small devices i.e. I’ll first get all the callout boxes, followed by all the buttons. Is this something that could perhaps be added to the furture enhancements list?
Kind Regards
Johanna

9

Hey Johanna,

If you’ve a minute, you can put that up as a feature request on our User Voice! In fact, there’s already a similar request asking for a height option for our Callout module which you can vote on the link below.
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/7665555-allow-us-to-adjust-the-height-of-callout-module

Re the module’s order on small devices, this will be implement on version 1.8 of our plugin. :slight_smile:

Ben