Need help fixing the CSS for comments below WP post

Product Support WordPress

AI-generated summary

Need help fixing the CSS for comments below WP post

The discussion revolves around fixing the CSS for comments below WordPress posts using the WP Discourse plugin. steelmaiden shares an example of the current state and requests suggestions for improvement.

Canapin provides two alternative CSS code snippets to enhance the comments section’s appearance, including adjustments to padding, font sizes, and display properties.

steelmaiden appreciates the suggestions and prefers the first example but requires further adjustments to the spacing between the avatar and username and the content below the comments.

Canapin clarifies that the initial code used SCSS and provides the compiled CSS version. Additionally, they offer a solution for adjusting the bottom avatars and suggest using browser dev tools to find the correct HTML classes for further customization. They also recommend checking the WP-Discourse settings to resolve the issue with the missing “Continue Discussion” link.

1

So i connected the WP discourse plugin with my forum but the comments below posts look pretty ugly.

Example:

image
image1068Ă—846 106 KB

Any suggestions on how to modify the CSS properly so the comments look decent would be well appreciated!

2

What about this?

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 30px;
    min-height: 70px;
}
.comment-body {
    display: flex;
}
.comment-meta {
    display: flex;
    position: absolute;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {    
    margin-left: 79px;
    margin-top: 30px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1147Ă—943 246 KB

3

Alternative:

.discourse-comments-area {
    padding-top: 15px;
}
.discourse-comments-title {
    font-size: 2em;
}
.comment {
    padding-top: 20px;
    min-height: 70px;
}
.comment-body {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.comment-meta {
    display: flex;
    //position: absolute;
    align-items: center;
    width: 100%;
    
}
.comment-metadata {
    margin-left: 5px;
    margin-top: 2px;
    color: #aaa;
    &:before {
        content: "/";
    }
}
.comment-author {
    display: flex;
    align-items: center;
    .avatar {
        width: 40px;
        height: 40px;
    }
    .fn {
        font-size: 1.4em;
        margin-left: 15px;
    }
}
.comment-content {
    margin-top: 15px;
    font-size: 1.15em;
    line-height: 1.5;
}

image
image1152Ă—1034 245 KB

4

That looks great. Thanks! I prefer the 1st example.

Just need to fix the spacing between avatar and the username, and also the stuff that comes below the comments:

image
image1201Ă—1004 162 KB

Also not sure why the link to Continue Discussion is not displayed below comments.

5

I forgot we weren’t on Discourse in your case and my code used SCSS, not CSS, that’s why there is some stuff that didn’t work.

Here’s the compiled CSS:

.discourse-comments-area {
	 padding-top: 15px;
}
 .discourse-comments-title {
	 font-size: 2em;
}
 .comment {
	 padding-top: 30px;
	 min-height: 70px;
}
 .comment-body {
	 display: flex;
}
 .comment-meta {
	 display: flex;
	 position: absolute;
	 width: 100%;
}
 .comment-metadata {
	 margin-left: 5px;
	 margin-top: 2px;
	 color: #aaa;
}
 .comment-metadata:before {
	 content: "/";
}
 .comment-author {
	 display: flex;
}
 .comment-author .fn {
	 font-size: 1.4em;
	 margin-left: 15px;
}
 .comment-content {
	 margin-left: 79px;
	 margin-top: 30px;
	 font-size: 1.15em;
	 line-height: 1.5;
}

For the bottom avatars, you can do this:

#comments .comment-reply-title .avatar {
    display: inline-block;
    margin-right: 10px;
    margin-top: 15px;
}

image
You just need to make, I guess, the two sentences above a bit bigger, but you can also do it yourself, just find the right HTML classes using your browser dev tools.

Maybe you need to check a setting in WP-Discourse?