Same height for columns/elements with custom padding and margin across several rows

lucbas · August 31, 2018, 6:16pm

Scroll down for the solution, and thanks to the great theme.co team!!

–

Thanks for building my favorite wordpress theme!

I have 2 columns that contain a classic feature box.
I would like to create tiles that have the same height.

I tried to:

Use the element as tile --> applied padding, box-shadow and rounded borders to the element.
Additionally, I used padding (left/right) to increase the gap between the tiles for visuals and used padding (top/bottom) in case the columns collapse to 1 column.
Use the column as tile --> applied padding, box-shadow and rounded borders to the column.

With 1) I’m not able to get the tiles to the same height. The equalize script from here cuts of the bottom part of the tile.

And with 2) the tiles are also not the same height and I’m not able to increase the gap between the columns and the top/bottom padding as I already used padding.

I made a representation with both attempts on a site (see secure note).

Do you have an idea how to make both elementsthe same height? Best case scenario would is if the smaller element is also centered.
The existing solutions I’ve found did not work in this use case.

Thank you very much for your outstanding support!

ruenel · August 30, 2018, 2:00am

Hello There,

Thanks for writing in!

Please go with the Column as a Tile.

First: you will need to insert equalize custom class in your row.
http://prntscr.com/kogxpo
Second: you will insert this custom JS code in the Cornerstone’s custom JS section
http://prntscr.com/kogxx8
Lastly: you will need this JS code:

(function($){
  $(window).on('load resize', function(){
    var max = 0,
    mobile = $(window).width();
		$(".equalize .x-column").css('height', 'auto');
    if ( mobile > 767 ){
      $(".equalize .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
      });
      $(".equalize .x-column").css('height', max);
    }
  });
})(jQuery);

Please check your test page now.

lucbas · August 30, 2018, 5:58am

Hi @RueNel

Thanks for your answer!

As you’ve posted in your pic, the equalize columns works, yes! But we still have following issues:
a) As we’re using the column as the tile, we’re not able to specify padding anymore (as it already has been used to space the element correctly inside the tile (column) --> Spacing between the tiles is not possible with padding.
b) Same as above, as padding has been used for the inside element, we’re not able to increase padding on top of the tile (column) in case they collapse to 1 column on mobile devices.

This is a pic when using the element as a tile. We are still able to use padding:

I used following CSS for element spacing and it works as defined (have another one for mobile):

/* Responsive Columns */
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 767px) {
  
  /* Tile Size 1 */
  .tile-size1 {
    padding: 1em 1em 1em 1em;
    background-color: white;
    max-width: 350px;
  }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  
  /* Tile Size 1 */
  .tile-size1 {
    padding: 2em 1.5em 1.5em 1.5em;
    background-color: white;
  }
}

What do you think?
a) How can we increase the gap between tiles (columns)?
b) How can we increase the gap on top of the tiles (columns)?

Thank you!

paul.r · August 30, 2018, 8:55am

Hi,

You can try adding margins

eg.

@media only screen and (max-width: 767px) {
  
  /* Tile Size 1 */
  .tile-size1 {
    margin-top:30px;
   margin-right:30px;
    padding: 1em 1em 1em 1em;
    background-color: white;
    max-width: 350px;
  }
}

Hope this helps

lucbas · August 30, 2018, 11:47am

Hi Paul

Thanks for helping out!

If I’d apply margin to the columns, it would push them on to a new line, see on the site mentioned in the secure note.

I used:

  /* Tile Size 1 */
  .tile-left-size1 {
    margin: 4em 1.5em 0em 0em;
  }
  .tile-right-size1 {
    margin: 4em 0em 0em 1.5em;
  }

(No padding required here, as it’s already in the column settings)

Cheers

paul.r · August 30, 2018, 1:54pm

Hi,

You need to adjust the width as well.

eg.

  /* Tile Size 1 */
  .tile-left-size1 {
      margin-top:50px;
      margin-right:10%;
      width:45%;
  }
  .tile-right-size1 {
      margin-top:50px;
      width:45%;
  }

You may change the width and margin.

Just note that width and margin-right should add up to 100%
eg. 45% + 45% + 10% = 100%

Thanks

lucbas · August 31, 2018, 12:53pm

You guys rock!

I was able to get everything to work, thank you very much!

I’ll change the title so that others can find this topic easier.

Wish you a great, great day!

lucbas · August 31, 2018, 3:07pm

Hi theme.co team

I inserted the equalize class on a row level and saw that the height is calculated the same for other affected rows on the same page. Would it be possible to have the same height only on a row level separated from other rows following? See the image below:

Edit: Removed other issue, noticed it has something to do with a js error

nabeel · August 31, 2018, 5:38pm

Hi again,

You can give different classes to each of your row, e.g equalize-one for your first row and equalize-two for your second row and then replace the previous code with the following code:

(function($){
  $(window).on('load resize', function(){
    var max = 0,
    mobile = $(window).width();
		$(".equalize-one .x-column").css('height', 'auto');
		$(".equalize-two .x-column").css('height', 'auto');

    if ( mobile > 767 ){
      $(".equalize-one .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
      });
      $(".equalize-one .x-column").css('height', max);

	  $(".equalize-two .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
      });
      $(".equalize-two .x-column").css('height', max);
    }
  });
})(jQuery);

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear your browser’s cache after adding the code.

lucbas · August 31, 2018, 6:18pm

Hi @Nabeel

Thank you so much for helping me out!

I got it working now with following script:

(function($){
  $(window).on('load resize', function(){
    
    var max1 = 0;
    var max2 = 0;
    var max3 = 0;
    
    mobile = $(window).width();
    
	$(".equalize-1 .x-column").css('height', 'auto');
	$(".equalize-2 .x-column").css('height', 'auto');
	$(".equalize-3 .x-column").css('height', 'auto');
    
    if ( mobile > 767 ){
      $(".equalize-1 .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max1 ){
            max1 = $(this).outerHeight();
        }
      });
      $(".equalize-1 .x-column").css('height', max1);

	  $(".equalize-2 .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max2 ){
            max2 = $(this).outerHeight();
        }
      });
      $(".equalize-2 .x-column").css('height', max2);
    
    $(".equalize-3 .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max3 ){
            max3 = $(this).outerHeight();
        }
      });
      $(".equalize-3 .x-column").css('height', max3);
      
    }
  });
})(jQuery);

I changed the title again that other can more easily find this solution.

Shoutout to the theme.co team! You’re doing great!

nabeel · August 31, 2018, 6:27pm

Hi again,

Thank you for sharing the working code with us. We’re glad we could help.

Cheers!

system · September 10, 2018, 6:27pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.