Hi there. I am trying to make the every third item move to next row. I successfully did that using nth-child(2n+1). However that created a problem for me which makes every fourth item move to the next row leaving the space empty. I don’t know why that happens. Can you guys please eliminate the fourth item empty space and move the fourth item on it’s place please? Here is the website link and the problem I have (Core Features): https://smeweb-solutions.com/?page_id=4684
Do you actually want each row to contain two items? If so, why don’t you use nth-child(even) and nth-child(odd)?
The Core Features are in three HTML rows (containers) and each row contains three feature boxes. If you move one feature box to a new row within the HTML rows, then there are still three HTML rows and therefore there is an empty hole to the right of the feature boxes that were moved.
You can rewrite your HTML so all of the feature boxes are inline-block and within one HTML row (container). The inline-block feature boxes will then wrap to fit within the HTML row’s width (as coded in CSS).
I would not know if there is a WordPress solution. @WebMachine ?
core features meaning the section of the page.
I am talking about exactly the screenshot you just posted.
Does post #3 not help explain the problem?
If you look in the contact page, you see i managed to apply this same method using nth-child(2n+1) and it worked. You can see this if you resize the window.
I don’t know if you are showing me the solution or what.
can you solve the problem for the core features section?
No, I cannot fix it using WordPress conventions. I will move this topic to the WordPress category for you.
Good luck.
But i have clearly solved it using the very same method using the nth-child(2n+1) for the contact us page and that worked without any problem.
The HTML must be different.
nop. everything is same.
only difference is by default the columns are different in core features (3) and contact us page (4). but that shouldnt create any problem. I’ll look into it.
On the contact us page, I see one row of four items being changed to 3+1 as the width is reduced. nth-child(3n+1) {clear:left} prevents the wrapped element from snagging on its preceeding sibs.
There is One row on the Contact page vs three rows on the Core Features page. Otherwise, the HTML is almost the same. Same idea, anyway.
If there were three rows here, each row would have two “holes” to the right of the wrapped element.
Since this is beginning to sound like an HTML/CSS issue rather than a WordPress issue, I’m moving it back to the HTML/CSS category. 
ok thanks for letting me know
Do you understand the problem?
Yes i do. You are saying that there are three rows in core features section and one in contact us page hence why its doing what it is doing. So only solution at the moment would be to only have 1 row if you want to eliminate the spacing issue.
2 Likes