I’m currently working on a site which needs to be changed from a wordpress cms into html (boostrap 5.2). I work in webdesign but unfortunately have zero knowledge in javascript (only html and css).
The original site on wordpress had a section with three columns and each of these three columns included a testimonial carousel with two elements. All of these elements had a picture on top and some text which varied in length. It was not a problem to make these three columns with the individual testimonial carousels the same height, even in responsive.
Now, I’m trying to reproduce this in bootstrap 5.2 with two cards in each of the three columns sliding individually per owl carousel. It works just fine but not in responsive. Apart from desktop view they are not the same height anymore. I tried it with javascript but the cards expand too much in height.
In short; I need the cards to be the same height at all times and they mustn’t expand in size.
I appreciate your help. Thanks in advance for your wisdom!

 
  
                
                    
                        
                            
                                
                                    
                                    
                                        

                                        

                                        

                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                        
                            
                                
                                    
                                    
                                        

                                        

                                        

                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                    
                

                
                    
                        
                            
                                
                                    
                                    
                                        

                                        

                                        



                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                        
                            
                                
                                    
                                    
                                        

                                        

                                        

                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                    
                

                
                    
                        
                            
                                
                                    
                                    
                                        

                                        

                                        

                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                        
                            
                                
                                    
                                    
                                        

                                        

                                        



                                    
                                    
                                        

                                                
                                                     E-Mail senden
                                                
                                            
                                    
                                
                            
                        
                    
                
            

I tried the following javascript that I got from here.

`<script>
var cards = $(‘.card-body’);
var maxHeight = 0;

    for (var i = 0; i < cards.length; i++) {
        if (maxHeight < $(cards[i]).outerHeight()) {
            maxHeight = $(cards[i]).outerHeight();
        }
    }

    for (var i = 0; i < cards.length; i++) {
        $(cards[i]).height(maxHeight);
    }

</script>`

This worked but unfortunately the class “.card-body” then refers to all cards on the page. Also, the height of the cards expands a lot which looks weird compared to their content.
I inserted my individual card classes into the script to avoid it from changing the layout of the other cards but it doesn’t work anymore with those.