Problem aligning blog posts

Hi there,

I have made a new website with GreatMag, previously used Sydney. I have the same issue with the blog posts not aligning. I followed the information outlined in this post https://athemes.com/forums/topic/problem-aligning-blog-posts/#post-542944 and it worked great for my website on the sydney theme, however this solution doesnt work with the GreatMag theme. What is the solution to align the blog posts so that the top of each image is exactly aligned?

Cheers
Caleb

Dear Caleb,

Since GratMag has different masonry grid markup, the suggested code doesn’t work. So it requires code adjustment. Please follow the below 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($) {

  if( $('.posts-grid').length ) {

    $('.posts-grid .hentry').wrapInner('<div class="hentry-inner" style="position:relative;"></div>');
  
  }

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

  $(window).load( function() {  

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

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


  1. Update

  2. Apply this custom CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.layout-masonry .absp-cat {
  left: 0;   
}  

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

.posts-grid .hentry{
  position: static !important;
  float: left;
}

.posts-grid .grid-sizer{
  width: 0;
  height: 0;
  display: none;
}

Regards,
Kharis