Support » Theme: Visual » Changing number of columns

  • Resolved fullonaksh

    (@fullonaksh)


    Anyone know how to change to 4 columns?

    I have 4 posts at 312px each, total 1248 width. But its still showing as 3 columns with a lot of margin inbetween each column.

    Tried changing widths in css but seems to be controlled by the columnWidths in jquery.masonry.min.js. New to jq any help appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • fullonaksh

    (@fullonaksh)

    Developer was kind enough to point me in right direction many thx to him.

    For anybody else, u want to change the columnWidth and gutterWidth in the jquery file in js folder.

    I just had a look but still cannot work out how do I create 4 columns ? my dev. site is http://dev.inspiremeland.com/ I am trying to get 4 columns instead of 3.
    Could you point me in the right direction what do I need to change exactly ?

    Hmm. I wanted to make it two columns instead of three.

    So basically in style.css you have.

    Three columns for normal window:

    .masonry .hentry {
    width: 32%;
    }

    Two columns for less than 790px wide window:

    .masonry .hentry {
        width: 48%;
      }

    One column for mobiles:

    .masonry .hentry {
        width: 100%;
        margin: 0 0 20px;
      }

    I wanted two columns for the normal window, so I changed it to 48% as well.

    Then in: /wp-content/themes/visual/js/jquery.masonry.min.js

    You have the code that sets three columns, or if they don’t fit two:

    if ( containerWidth > 790 ) {
    		    		return ( ( containerWidth - ( elem_width/25 ) ) / 3);
    		    	 } else {
    		    		return ( ( containerWidth - ( elem_width/25 ) ) / 2);
    		    	}

    I just wanted two so:

    if ( containerWidth > 790 ) {
    		    		return ( ( containerWidth - ( elem_width/25 ) ) / 2);
    		    	}

    That should give an idea how it works.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Changing number of columns’ is closed to new replies.