BlueOwlCreative » Topic: portfolio page thumbnails do not align

portfolio page thumbnails do not align

jdong — Thu, 23 Jul 2015 22:23:57 +0000

So I changed the portfolio page to show 4 column instead of 3. I even made the bottom margin is little bigger from 20px to 30px. But still the gallery is broken. all the thumbnail pictures of the single items are not aligning together. some how they skip spot and leave a empty space. Please see the link.

http://bectechnologies.net/wordpress/products

Can you tell me that’s why? and how do I fix it ?

Reply To: portfolio page thumbnails do not align

BlueOwl — Sun, 26 Jul 2015 15:51:05 +0000

Hi there friend, the clearing is messed up in your case as the items have different heights, here’s how to fix, add this to your Theme Options -> Custom Styles (CSS):

.portfolio_item:nth-child(4n+1){
  clear: left;
}

This will do automatic float clearing after every fourth item and should take care of your problem!

Reply To: portfolio page thumbnails do not align

jdong — Mon, 27 Jul 2015 14:55:35 +0000

that’s awesome!!! worked magically! Thank you very much!

Reply To: portfolio page thumbnails do not align

BlueOwl — Mon, 27 Jul 2015 15:14:33 +0000

Anytime!

Reply To: portfolio page thumbnails do not align

jdong — Tue, 28 Jul 2015 05:55:32 +0000

Hi BlueOwl,

Now a new problem occurred, after we fix this one. portfolio page thumbnails right now are align perfectly and looks very nice. But after I added the code by follow your direction, the bottom “related portfolio item” and “Portfolio item carousel” are messed up. it’s showing to three lines instead of one and do not align….How do we fix it? Can you provide a solution that can make both of them work normal? Please Help!

Thanks.

Reply To: portfolio page thumbnails do not align

jdong — Tue, 28 Jul 2015 05:57:14 +0000

here is the link, to show your the problems:

http://bectechnologies.net/wordpress/portfolio_item/mx-650 (related portfolio item)

http://bectechnologies.net/wordpress/whitepapers (Portfolio item carousel)

Reply To: portfolio page thumbnails do not align

jdong — Thu, 30 Jul 2015 03:27:17 +0000

Please BlueOwl help me!!!!

Reply To: portfolio page thumbnails do not align

BlueOwl — Sat, 01 Aug 2015 17:11:05 +0000

Hi there,

Sorry, we were out for a short summer holiday.
So how about you change the above to:

.page-template-portfolio-three-column .portfolio_item:nth-child(4n+1){
  clear: left;
}

This way it will only apply itself on the template with the portfolio listing.

Reply To: portfolio page thumbnails do not align

jdong — Sun, 02 Aug 2015 05:40:38 +0000

Perfect solution! right now not only the thumbnails align problem is solved but the bottom related items. Thank you very very much!!!