# Need help fixing the CSS for comments below WP post
**URL:** https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296
**Category:** WordPress
**Created:** [25 april 2020 om 21:23 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296 "2020-04-25T21:23:41Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@steelmaiden](https://meta.discourse.org/u/steelmaiden)
#### Post date: [25 april 2020 om 21:23 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296/1 "2020-04-25T21:23:42Z")
So i connected the [WP discourse](https://github.com/discourse/wp-discourse) plugin with my forum but the comments below posts look pretty ugly.
Example:
> **[Kako pobijediti Facebook algoritam - 11 savjeta kako do većeg dosega - GeeK.hr](https://geek.hr/clanak/kako-pobijediti-facebook-algoritam/#comments)**
>
> Želite ostvariti veći doseg na Facebooku? Zanima vas kako funkcionira Facebook algoritam i na koji način možete nadmudriti taj algoritam? Možete li uz male
Any suggestions on how to modify the CSS properly so the comments look decent would be well appreciated!
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [25 april 2020 om 22:39 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296/2 "2020-04-25T22:39:19Z")
What about this?
```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;
&: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;
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [25 april 2020 om 22:44 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296/3 "2020-04-25T22:44:26Z")
Alternative:
```css
.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;
}
```
---
### Author:  [@steelmaiden](https://meta.discourse.org/u/steelmaiden)
#### Post date: [25 april 2020 om 23:01 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296/4 "2020-04-25T23:01:41Z")
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:
Also not sure why the link to Continue Discussion is not displayed below comments.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [26 april 2020 om 00:08 UTC](https://meta.discourse.org/t/need-help-fixing-the-css-for-comments-below-wp-post/149296/5 "2020-04-26T00:08:58Z")
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:
```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:
```css
#comments .comment-reply-title .avatar {
display: inline-block;
margin-right: 10px;
margin-top: 15px;
}
```
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.
> [@steelmaiden](#):
>
> Also not sure why the link to Continue Discussion is not displayed below comments.
Maybe you need to check a setting in WP-Discourse?