Fix masonry posts height

Hi!
I am currently using the masonry layout for my blog page, and I was wondering if it was possible to make all the posts the same height?

Thanks in advance, nice theme!

Hello there,

Please try to do the following steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */
(function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
row.equalHeight();}}
return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;_this.data('grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
$(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

jQuery(function($) {

	var $postsContainer = $('.posts-layout');

  $(window).load( function() {  

    // Destroy masonry grid  
    $postsContainer.masonry('destroy');

    // Run equal height element in row
    $postsContainer.find('.hentry').responsiveEqualHeightGrid();
   
  });
  
});

  1. Update

  2. Apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.


.posts-layout:after{
  content: '';
  display: block;
  clear: both;
}

.posts-layout .hentry{
  position: static;
  float: left;
}

You would clear your web browser’s cache before reloading your site to see the code addition takes affect.

Regards,
Kharis

Great, it works!
Thank you for your awesome support :slight_smile:

Hello there,

Thank you for updating me. I am glad to know the code works for you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis