Support » Theme: Talon » Posts layout

  • Resolved juliagiannella



    I want to change the number of posts per row on the category page (it’s currently 3 and I would like to be 4).

    I guess I need to change the .php file, but I don’t know exactly which one and how.

    Any suggestions?


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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hello there,

    Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 992px) {
      .masonry-layout .hentry {
        width: 22% !important;




    Thanks so much @kharisblank ! it worked fine!

    One more question. Is there a simple way to align the items of a row? What is happening is that each thumbnail card has a different height and this affects the rows alignment.

    Hello there,

    Firstly try adding the below CSS code:

    .masonry-layout .posts-layout .hentry {
      float: left;

    Then do 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
     (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]);}
     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;'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('grids-event-namespace'));return this;};})(window.jQuery);
     if( $('.masonry-layout').length ) {
       var $postsContainer = $('.posts-layout');
       $(window).load( function() {
         // Destroy masonry grid
         // Run equal height element in row

    4. Update


    Sorry for not answering before. It worked just fine! Thanks for that!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.