Team page display

Monday, October 27, 2014 - 21:58
On the page that displays team members the first row of 4 line up but the 2nd row and there after do not line up. I see that the demo has this same issue - http://demo.themesvision.com/drupal/jollyness/content/team-members. How do we get each row to line up even when the description for each team member is a different length? Display on smaller screens like phones which have only one team member per row look fine. It is just the desktop and tablet displays that have issues. Thank you
Saturday, December 20, 2014 - 16:46
Just wanted to touch base since I had not seen a reply.
Saturday, December 20, 2014 - 16:46
We are sorry for delay reply. Please add css below to pages.less file or to your custom.less file to fix the issue .team{ .dexp-grid-item { &:nth-child(4n+1) { clear:left; } } } Thanks!
Saturday, December 20, 2014 - 16:46
I couldn't get your code to work but it helped me to figure out a solution. Maybe you could help me fine-tune it. Below is my code. On tablets it goes from 4 items (team members) in a row to 2 items per row so I needed a way that would account for this. I'm not that familiar with less so this is plain css. @media (min-width: 768px) {.dexp-grid-item:nth-child(2n+1), .team:nth-child(2n+1){ clear:left; } } @media (min-width: 992px) {.dexp-grid-item:nth-child(4n+1), .team:nth-child(4n+1){ clear:left !important; } .dexp-grid-item:nth-child(2n+1), .team:nth-child(2n+1){ clear:none; }}
Saturday, December 20, 2014 - 16:46
Great, Your code will works well con all devices. Thank you for your solution. Thanks!