Hey guys, I have tried a few maxlength and other css mods to make the posts that show up in the grid have a character limit to make all of the entries equal in height…but I can’t figure out what I am missing. Do you guys have any ideas?
Link added next
Hi,
To limit the title characters, you can try adding the code below in Cornerstone > CSS
body .tg-item .tg-item-title a {
text-overflow: ellipsis;
max-height: 50px;
outline: none;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Hope that helps
Perfect. Thank you
You are most welcome. 
One last question here. It seems on mobile, the grid is pushing to the right. I don’t have any padding set or anythign. Any ideas?
Hi Chris,
It’s coming form this CSS, and I’m not sure if it’s a custom CSS as it’s coming from grid generated CSS.
#grid-199 {
margin-top: 20px;
margin-left: 20px;
}
Please remove the left margin, or you can add this custom CSS to override it
#grid-199 {
margin-left: 20px !important;
}
Hope this helps.
Hey guys…
Everything above worked and I even did some more customization to make things where they had smaller post titles work evenly.
Another question I have is it seems like the grids are getting a little wonky now for some reason. Only one in a line seems to either be higher or lower when laid out. The client is being pretty picky about wanting things to be straight. Any ideas on if I put something wrong in or if I am missing something?
Thanks for all of the help you guys provide.
Hello Chris,
Thanks for updating the thread.
I checked the website and Grid items seems to be loading and working fine on my end. I don’t see issues with the Grid items positioning. I suggest you to clear cache and see how it goes.
Having said that I noticed that you are using old version of Pro Theme on the website which might cause issues. I suggest you to update Pro Theme to the latest version 2.4.6. You can take a look at following resources to get started.
Thanks.
SO I updated everything and it seemed to be working fine. Now it’s off again. You will see text is a bit off and on the second row one of the boxes is out of sync.
Hi @cmdiggs,
It’s because of this custom CSS:
.tg-ktts-skin .tg-element-1 {
position: relative;
font-size: 17px;
line-height: 24px;
font-weight: 400;
text-align: center;
display: block;
margin: 0;
padding: 25px 15px 8px;
}
Please change the text align to left.
Hope it helps
I don’t have that custom CSS anywhere I can find. Only what was posted above. Anywhere else I should look?
Here’s what I have:
body .tg-item .tg-item-title a {
text-overflow: ellipsis;
min-height: 50px;
outline: none;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body .tg-item-excerpt .tg-element-2 a {
text-overflow: ellipsis;
max-height: 30px;
outline: none;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Hi,
In that case, to make your text align left, you can add this in Theme Options > CSS
body .tg-ktts-skin .tg-element-1,
body .tg-ktts-skin .tg-element-2 {
text-align:left;
}
The other text is not aligning because you have added , please remove it from your content.
Thanks
Oh man…now I see what you all are looking at. I’m not concerned about that. We can fix it. What I am concerned about is that we have set character limits on the excerpts and still some of the excerpts seem to be longer than others. I think I fixed the issues with some of the rows being out of alignment.
Hi,
To fix it, you can add this in Theme Options > CSS
body .tg-item-excerpt .tg-element-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
line-height: 16px;
max-height: 80px;
}
Hope that helps
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.