• Hello

    I would love some help to turn the masonry layout on my homepage into a fixed grid, so that the rows remain in line and do not become staggered, is there a way I can do this in the theme editor?

    Thank you!
    Charlotte

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi,

    Thank you for contacting us. I am happy to help with your queries.

    Try doing these 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

    
    (function($){
    
          /**
           * 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();
    
            });
    
          });
    
        })(jQuery);
    

    4. Update
    5. Add this CSS code to Appearance > Customize > Additional CSS.

    
    .posts-layout:after{
      content: '';
      display: block;
      clear: both;
    }
    
    .posts-layout .hentry{
      position: static;
      float: left;
    }
    

    I’d request giving it a try and let me know your views.

    Regards,
    Kharis

    Thread Starter charlotteepringle

    (@charlotteepringle)

    Thank you so much for your help!

    You’re welcome!

    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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Turning Masonry into grid’ is closed to new replies.