Columns

• 

  forfatternesklimaaksjon · Member · Sep 8, 2014 at 7:27 am

  • Copy link
  • Add topic to favorites

  Hey,

  I will change the front page of this blog from three columns unto two. What is the string for this operation, and how do I do it? Maybe I ought to ask a professional webdesigner to fix this.

  The blog I need help with is: (visible only to logged in users)

• 

  senff · Staff · Sep 8, 2014 at 1:51 pm

  • Copy link

  If you have a Premium account, or the Custom Design add-on, you can try adding this CSS code:

  .front .masonry .hentry {
      width: 48%;
  }

  Maybe try a few percentages less, to see if you get the results you want.

• 

  forfatternesklimaaksjon · Member · Sep 8, 2014 at 6:37 pm

  • Copy link

  A Premium account, yes. And thanks for your advice.

• 

  designsimply · Member · Sep 30, 2014 at 3:38 pm

  • Copy link

  I tried this and actually couldn’t get it to work at first. In the example above, the part of the selector that says “.front” doesn’t apply in this case—however, that’s not the only problem.

  I researched the Visual theme and found that it uses a script called masonry to stack the posts into a brick-layer grid. In the script, it is hard coded to set the columns to 3 when the container width is greater than 790px. Because of that, the only way I can see to move the columns from 3 to 2 given the constraint of not being able to edit JavaScript on WordPress.com would be to limit the container width to 790px and center it and set the width to 48% as senff’s earlier attempt tries to do. Here is an example I came up with which you can try out by adding it to your Appearance > Customize > CSS editor:

  .masonry .site-content {
  	margin: 0 auto;
  	width: 790px;
  }
  
  .masonry .hentry {
  	width: 48%;
  }
  
  .masonry .wp-post-image {
  	width: 100%;
  	height: auto;
  }

  The first block centers the articles container element and limits the width to 790px (a requirement of the JavaScript in this case). The next block sets each article width to 48% which leaves a little room for padding. The last block stretches the post images to 100% to make them look a little better with the column width adjustment.