Portfolio layout – 4 images across instead of 3

Community Forums Forums Design Tips and Tricks Portfolio layout – 4 images across instead of 3

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  David Chu 2 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #38934


    Hi, I’m using the Balance theme for my site, and the Portfolio template for my homepage. I need there to be 4 images across instead of 3. I already changed the .page-template-page_portfolio-php .featured .post to

    margin: 0 9px 0px; padding: 0 0 10px; width:223px;

    which equals a total width of 937 compared to the original 940 px with the 3 across format.

    Why is my site still showing 3 across? Thanks



    David Chu

    Your assumptions are off, I’m afraid. That margin setting gives you margins on both sides of each image. So that’s 18. Padding does not figure in because it’s at the bottom. Then you have a width of 223. We’re up to 241.

    241 x 4 = 964
    which is too wide in a 960 container.

    Here’s your CSS. You have your choice of reducing the 2nd margin figure by 1, or reducing the width figure by 1. The first way fits comfortably at 956, the second fits exactly 960. I’d choose the former. Go ahead and try one of those.

    .page-template-page_portfolio-php .featuredpost .post {
      margin: 0 9px;
      padding: 0 0 10px;
      width: 223px;

    If I were super OCD I might make the 2nd margin figure 8.5px. That adds up to exactly 960. :-) But I like having a teeny bit of breathing space.


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.