W3.CSS Card Heights

[absolutebeginner]

Hi everyone,

I borrowed part of the Marketing / Website Template (W3.CSS), specifically the <!-- Work Row --> portion.

It looks fantastic, but according to the device browser, (specifically phones and tablets) when in "landscape" mode, the "w3-card" divs have different height according to the text.

I've been trying for days to find a solution - flexbox, w3-cell, pseudo-elements - mostly way above my understanding, and nothing has worked so far. Wouldn't be surprising if I've found a valid solution and mucked it up because of my inexperience 

Anyway, here's the code from the template. Maybe delete  <p>Blablabla</p> from one one of the divs inside the cards to see the issue. Actually the length of text I have inside those divs results in the cards showing the same height down to 1440px, any smaller results in the cards showing unequal height.

<!-- Work Row -->
<div class="w3-row-padding w3-padding-64 w3-theme-l1" id="work">

<div class="w3-quarter">
<h2>Our Work</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="w3-quarter">
<div class="w3-card w3-white">
  <img src="/w3images/fjords.jpg" alt="Vernazza" style="width:100%">
  <div class="w3-container">
  <h3>Customer 1</h3>
  <h4>Trade</h4>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  </div>
  </div>
</div>

<div class="w3-quarter">
<div class="w3-card w3-white">
  <img src="/w3images/lights.jpg" alt="Cinque Terre" style="width:100%">
  <div class="w3-container">
  <h3>Customer 2</h3>
  <h4>Trade</h4>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  </div>
  </div>
</div>

<div class="w3-quarter">
<div class="w3-card w3-white">
  <img src="/w3images/mountains.jpg" alt="Monterosso" style="width:100%">
  <div class="w3-container">
  <h3>Customer 3</h3>
  <h4>Trade</h4>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  <p>Blablabla</p>
  </div>
  </div>
</div>

</div>

[absolutebeginner]

I appear to have solved this, almost.

Due to word length vs column height, it's always the first card's div or the second card's div that has more height. 

After giving them ids of "col1", "col2" and "col3", I use the below jQuery. I guess that a better solution to is to loop through each of them, but I'm not at that level yet. I'm also using the resize event, for when I manually adjust the browser width. Note that it's not perfect, I get some weird overflow at certain resolutions. Also see the issue when rotating devices to "portrait" mode.

            // Equalise card heights
            $(document).ready(function(){
            
                if($("#col1").css("height") >= $("#col2").css("height")){
            
                    $("#col2").css("height", function(){ 
                        return $("#col1").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col1").height();
                    });
                
                }
                
                else {
                
                    $("#col1").css("height", function(){ 
                        return $("#col2").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col2").height();
                    });    
                
                }

            });        

            $(window).resize(function(){
            
                if($("#col1").css("height") >= $("#col2").css("height")){
            
                    $("#col2").css("height", function(){ 
                        return $("#col1").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col1").height();
                    });
                
                }
                
                else {
                
                    $("#col1").css("height", function(){ 
                        return $("#col2").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col2").height();
                    });    
                
                }
            
            });

I'm working on resetting the heights in "portrait" mode as there's too much white space due to the height manipulation.

@media only screen and (max-width: 600px) {

    //responsive code goes here

}

Anyway, I'll post what I came up with later if successful. If any of you have a better solution to what I have so far, or something to reset the heights when in portrait mode, I'll be glad to see it.

[absolutebeginner]

Hmm, seems I jumped the gun. 

The  $(document).ready(function() part seemed to create issues with certain browsers. I removed it and added the  $("#col1 ~ 3").css("height","auto"); lines at the beginning of the resize event. It appears to have another advantage in making responsive code for small screens unnecessary. Still testing, but looking good so far.

            $(window).resize(function(){
            
                $("#col1").css("height","auto");
                
                $("#col2").css("height","auto");
                
                $("#col3").css("height","auto");
            
                if($("#col1").css("height") >= $("#col2").css("height")){
            
                    $("#col2").css("height", function(){ 
                        return $("#col1").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col1").height();
                    });
                
                }
                
                else {
                
                    $("#col1").css("height", function(){ 
                        return $("#col2").height();
                    });            

                    $("#col3").css("height", function(){ 
                        return $("#col2").height();
                    });    
                
                }
            
            });

[dsonesuk]

The better idea would be loop each identical class gathering current height and comparing with stored current highest if current element height higher replace current highest with new value.

Then at end of loop do another loop to replace all heights of specific class to highest end value from previous loop. This prevents the need of unique I'd ref and code being required for each.

[absolutebeginner]

Thanks dsonesuk.

Could you show a newbie how it's done?

 

[dsonesuk]

            $(document).ready(function() {

                var highestElem = 0;

                //identify highest
                $(".w3-card").each(function() {

                    if ($(this).height() > highestElem)
                    {
                        highestElem = $(this).height();
                    }
                });
//set all specific classes to highest value from previous loop variable
                $(".w3-card").each(function() {
                    $(this).css("height", highestElem);
                });

            });

 

[absolutebeginner]

Thanks dsonesuk.

I'll give it a shot.