WP SITES

Log in

Changing Number Of Portfolio Archive Columns & Fixing Gap Between Featured Images

—

by

Brad Dalton

If you add a portfolio page to your StudioPress theme and can’t work out why it doesn’t display correctly, here’s one fix which may solve the problem.

Firstly, here’s a common problem which happens when changing the number of featured image columns you want displayed inline.

featured images

All you need to do to fix the problem which causes a gap, is modify this line of CSS code:

.cpt-portfolio .portfolio:nth-of-type(6n+1) {
                clear: left;
}

Simply change the 6 to the same number of columns you want to display which is 4 in this case:

.cpt-portfolio .portfolio:nth-of-type(4n+1) {
                clear: left;
}

And here’s what your portfolio archive now looks like:

portfolio archive

Learn more about the nth-of-type pseudo-class.

Related Tips

Comments

2 responses to “Changing Number Of Portfolio Archive Columns & Fixing Gap Between Featured Images”

  1. howard harvey Avatar
    howard harvey

    Your time is perfect. I have run into this problem this week and will try this solution today. On a different note, you like big surf so do I but unfortunately I broke my knee twenty years ago and all I can do now is Pipo board. I live in Lompoc a small town in the central coast of CA.

    Thanks again

    1. Brad Dalton Avatar
      Brad Dalton

      Hello Howard.

      Its a simple solution but one that i knew would come in handy for people who have added a portfolio page and changed the number of columns for featured images.

      Haven’t been for a surf for a while and starting to get really unfit so should get back into it.

      I like body body surfing and started when i was in single digits!! hahaha.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.