Portfolio grid not aligning properly

HTML & CSS
1

Hi all,
I’m working locally on this WP website so i have nog link to provide to you. I have a portfolio grid that is not aligning properly, see this image →

1215×960 250 KB

I can see the margins of each portfolio item are causing problems, each time I have a title with 2 lines instead of 1, the portfolio item underneath moves to the next column. I hope this makes some sense…
I hope someone can help me out with this, because this site needs to go live.

2

Without seeing any actual code it is very hard to diagnose the problem.
Would it be possible to post some html and css here?
Though I suspect this has been done using floats and they are snagging and not clearing.

3

Thanks for your reply. I understand it’s not easy indeed without seeing the code.
I’m using the Divi theme of Elegant themes. I used this code to make it a 3-column layout (instead of standard 4-columns) → https://quiroz.co/customize-divi-portfolio-grid/
The author of this tut says: I dont think it has to do with the titles. I think there needs to be some addition customization so the the css that is being applied tot he “last child” is being applied to the third one and not the fourth one.
But I’m still not sure what to do about it.

4

The links to the live demos there appear to be broken, so there is no way to see the actual code.

5

Hi Sam,

I figured this one out myself apparently, don’t know if it will always work, needs some more testing:

.et_pb_portfolio_item {
	display:inline-block;
	float:none!important;
	width:33%;
	vertical-align:top;
}
1 Like
6

Yes, I would always prefer inline-blocks over floats for this kind of thing as floats come with too many clearing issues.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.