Title: Posts layout
Last modified: March 19, 2019

---

# Posts layout

 *  Resolved [juliagiannella](https://wordpress.org/support/users/juliagiannella/)
 * (@juliagiannella)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/posts-layout-5/)
 * Hi,
 * 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?
 * Thanks!
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fposts-layout-5%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/posts-layout-5/#post-11332461)
 * 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;
         }
       }
       ```
   
 * Regards,
    Kharis
 *  Thread Starter [juliagiannella](https://wordpress.org/support/users/juliagiannella/)
 * (@juliagiannella)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/posts-layout-5/#post-11335479)
 * Thanks so much [@kharisblank](https://wordpress.org/support/users/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.
 *  [Kharis Sulistiyono](https://wordpress.org/support/users/kharisblank/)
 * (@kharisblank)
 * [7 years, 1 month ago](https://wordpress.org/support/topic/posts-layout-5/#post-11337126)
 * 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](https://wordpress.org/plugins/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);
   
        if( $('.masonry-layout').length ) {
          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
 * Regards,
    Kharis
 *  Thread Starter [juliagiannella](https://wordpress.org/support/users/juliagiannella/)
 * (@juliagiannella)
 * [6 years, 10 months ago](https://wordpress.org/support/topic/posts-layout-5/#post-11697208)
 * Sorry for not answering before. It worked just fine! Thanks for that!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Posts layout’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/talon/1.08/screenshot.png)
 * Talon
 * [Support Threads](https://wordpress.org/support/theme/talon/)
 * [Active Topics](https://wordpress.org/support/theme/talon/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/talon/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/talon/reviews/)

## Tags

 * [category page](https://wordpress.org/support/topic-tag/category-page/)

 * 4 replies
 * 2 participants
 * Last reply from: [juliagiannella](https://wordpress.org/support/users/juliagiannella/)
 * Last activity: [6 years, 10 months ago](https://wordpress.org/support/topic/posts-layout-5/#post-11697208)
 * Status: resolved