Problem aligning blog posts

Hello

I have countered another aligning problem as one of my blog posts is out of sync.
Page: http://www.siimsemiskar.ee/blogi/
Is there a way to get second line of blog posts align correctly?

All the best
Siim

Notice the article top left contains 3 lines of text, where the other 2 top ones have 4 lines of text. Maybe if the top left article had 4 lines of text as the other 2 top, it may push the bottom left photo down one line to align properly with the others?

I have no idea, just a thought :stuck_out_tongue:

Dear Siim,

Thank you for reaching out to us here.

I do agree with what Tony has been said. Basically, we need to make the post item blocks has equal height to achieve your objective. The current layout is handled by Masonry script. It removes unnecessary vertical spaces between posts. That’s why your first second line post moves up a little bit.

We can achieve your objective by adding a couple of jQuery code. Firstly, we need to remove the default masonry function. Then rebuild the layout, so that each item in row has equal height. We can use this library. But before doing so, posts must float left.

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste the following code into the “Scripts in header:” box:

<style type="text/css">

/*
 * Float left the posts 
 */ 

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

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

</style>

  1. Paste the following code into the provided “Scripts in footer:” box

<script type="text/javascript">

  /**
   * 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();
     
    });
    
  });

</script>

  1. Save settings

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

Regards,
Kharis

Thank you again. Problem is solved.

Many thanks
Siim

Hi! I have the same problem, which you can see by visiting https://acravocats.com/fr/blogue/

I have used the codes provided above through the Header and Footer Scripts plugin, but even after clearing my cache it has not done anything. Do I need to upload the GitHub library to my site after doing that? If so, how do I do this?

Thanks for the help, as always. You guys rock.

Best,
-A

Hello there,

Try doing the below steps instead, please.

  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

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

/*
 * Float left the posts 
 */ 

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

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

Regards,
Kharis