Hi,
I’m looking to increase the line height of the comments/chat text using custom CSS. I’ve never worked with custom CSS before and don’t have any coding experience, so I’d really appreciate it if someone could explain how it works in practice. How can I adjust the line height?
Thanks a lot!
1 Like
I could be mistaken, but I’m pretty sure I got this figured out last year. I’ll check my codebase when I’m back at my desk, happy to help you out if I can.
1 Like
Sorry for the delay, here is the code on my project. I do have mine set to “Comments” instead of “Chat”, I’m not 100% sure if this would work otherwise.
Go to the Options of the Comments component, scroll down to the Custom CSS section and change the name inside the box to the following… event-log
Then go to the Settings, select the Appearance tab and paste the following code to the CSS box…
/* Comment Spacing */
.event-log .hlNMRm {
padding-bottom: 23px;
padding-top: 13px;
}
Afterwards, just enable the toggle labeled “Preview custom CSS” below the code box, then change the spacing values to whatever you need them to be.
You can also change the CSS Class Name to anything you like, but you must change the name inside of the code I provided as well as the components Custom CSS name if you decide to do that.
One additional thing to keep in mind… If Glide changes the CSS ID of the line separating the comments inside of the component, the main class ID will need to be updated at that point. I’ve had mine set this way since last year with no changes, so hopefully you’ll be good for a while.
Hope this helps, good luck.
1 Like
Using this random ID is prone to breaking, I think you should find a more stable way to target that class like this.
.event-log div[class*="wire-rich-text-style"] p {
line-height: 1.5;
}
2 Likes
Thank you very much, for your help and time.
2 Likes