I’m not bashing by any means, I can see why Divi is such a popular WordPress theme, but for someone like me who is used to creating custom themes, it can be really difficult to work within the confines of a page builder instead of just creating whatever look and feel you want.

With that said, I’ve been playing with Divi and came across a particular difficulty that almost sent me down a big rabbit hole, and that’s the Filtered Portfolio element, specifically if you want it displayed in anything other than the default 4 columns.

This isn’t something that’s optional, but there’s some stylesheet rules that many have suggested you can use to create it, and it goes something like this…

@media only screen and ( min-width: 768px ) {
  #three-column-grid .et_pb_grid_item {
    width: 28.333%;
    margin: 0 7.5% 7.5% 0;
  }

  #three-column-grid .et_pb_grid_item:nth-child(3n) {
    margin-right: 0;
  }

  #three-column-grid .et_pb_grid_item:nth-child(3n+1) {
    clear: left;
  }

  #three-column-grid .et_pb_grid_item:nth-child(4n+1) {
    clear: unset;
  }
}

Then you make sure that you edit the element in the Divi page builder and go to the Advanced tab and add an ID of “three-column-grid”.  I like using an ID for this as it has a high specificity and therefore should override other rules, without resorting to the dreaded “!important”.

The problem that I came across using this is that at the bottom of the portfolio you get navigation links, and when you move to page 2, those “nth-child” rules fall down, because Divi makes all the items from the first page hidden, but keeps them in the list, so they are included in the “nth-child” calculation.

There is no way around this with CSS, you can’t just check the visible ones.  And the internet seemed to think that javascript was the way to go, and I was absolutely about to throw myself headlong down the rabbit hole.

And then…

Make the number of items divisible by 3.

(That was the voice in my head).  And there you have it, crisis averted.