Hi!
My blog page is fine, and displays the post in the grid, BUT the grid has uneven sizes for each post.
I would like my posts to be displayed in 3 columns, going down the page. Please help me fix this.
www.gayazaoldgirls.com/blog
This is the same as my shop page. The second line below has different sizes. I will not be having more than two lines. So if you can please help me fix this, I will be grateful.
Hello there,
Actually it isn’t an issue to resolve as masonry-styled grid layout to maintain the spaces of each items when it has variation height of title, image, and text. In short, it’s imagined to look like this photos grid. Of course this situation doesn’t meet your need, as you only have a few of posts. The solution for this, please do these steps:
(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 . Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.
.posts-layout:after{
content: '';
display: block;
clear: both;
}
.posts-layout .hentry{
position: static;
float: left;
}
Flush any applied cache in your site, as it usually blocks new code additions to take effect. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens
Regards,
Kharis
Hello!
This seems like a lot of work as I am not a Developer. Before I do anything, I need to be sure that it will result what I asked for.
I don’t want the blog page to show photos only.
I like My blog page the way it is now, Photos and words.
I will have one or two blogs a month…so I would like all posts to
display down the page in a nice grid …Just like ‘Latest News’ widget…and to keep continuing down the page as I add more posts
it should just have same size of photos to be displayed and same number of words to be displayed.
Waiting for your advice.
Hello there,
It won’t remove any content. It’ll force each post grid to have equal height in row. Let me know if it troubles you.
Regards,
Kharis
Thank you. I will do it much later after I have put more posts.
Thank you.