Cleaner Comments for your Divi website

Cleaner Comments for your Divi website

If you’re using the standard commenting system that comes with Divi then you may find this CSS snippet useful. It cleans up a few little quirks and adjusts the layout in a few ways:

1. Only the first comment will indent from now on, so you won’t end up with the comment text getting crazy thin when conversations happen.

comment one
  • Facebook

2. Sub-comment avatars are now smaller than standard comments.

3. The avatars are circular, which fits in better with most designs. At least to my eye anyway…

4. The avatars are smaller on mobile devices and the text has more room.

comment 2
  • Facebook

5. The reply button is underneath and out of the way of the text. If you were experiencing the ‘looong reply’ bug, you won’t now.

6. The comment submission form has been cleaned up and reduced in size by having the form options next to the comments section.

COMMENT 3
  • Facebook

To use this comment clean-up, just add this CSS to your child theme or epanel.

 

 

/*******************************/
/******* CLEANER COMMENTS ******/
/*******************************/

.comment_avatar img { border-radius: 50%; } /** circle images **/

@media (min-width: 768px) { /** The breakpoint for the comments form **/
 body:not(.logged-in) #comment { max-width: 50%; float: right; margin-top: -186px; height: 172px; } /** even form sections **/
 .children .comment.depth-2 { margin-left: 30px;} /** offsets the first child, but no others **/
 .comment .children { margin-left: 0px; } /** offsets the first child, but no others **/
 .comment .children .comment_avatar img { max-width: 60px; } /** make reply avatars smaller **/
 .comment .children .comment_avatar { margin-left: 20px; } /** keep reply avatars left **/
 
}

@media (max-width: 767px) {
 .comment-reply-link { bottom: -20px !important; top: auto !important; } /**keeps the button off of the text **/
 .comment_area { padding-bottom: 40px; } /**keeps the button off of the text **/
 .comment_avatar { max-width:50px } /** smaller avatar on mobile **/
 .comment_postinfo, .comment-content.clearfix { margin-left: -30px; } /**smaller avatar keeps left **/
}

 

So there you go! Cleaner comments, a better mobile experience and all with a little CSS. Let us know in the comments what you think or if you plan on using this snippet. ๐Ÿ™‚

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.