Comment Section Border and Padding

Hi there,

Your site is under maintenance mode so I can't see.

We won't be able to provide a full customization solution like this but I'll try my best to point you in the right direction.

Thanks for your understanding.

Hi Leo,
Its live now. Please assist.

The link is leading to a page that's password protected, can you share the password?
https://www.screencast.com/t/Ymses3YWN

I removed the password. Please check again.
I'm sorry for the inconvenience.

No worries :)

Looks like you've achieved most of your goals, good job!

You can change the meta color at customizer > colors > Content > Entry meta text & Entry meta links.

If you only want to change the meta in comment area, try this CSS:

.comment-meta .entry-meta.comment-metadata * {
    color: #987662;
}

To move the avatar to the left, try this CSS:

.comment ul.children .avatar {
    margin-left: -75px;
}

Thank you so much, Ying.
This is just moving the avatar to the right while the metadata stays at the same place. I also want to move the metadata along with it.
Moreover, I want to move the parent comment avatar to the left along with the metadata as well.
I checked the mobile version and I found the layout quite disturbed.
Please guide.

Try this CSS:

.comment .comment-meta {
    margin-left: -75px;
}

instead of this:

.comment ul.children .avatar {
    margin-left: -75px;
}

Let me know :)

Perfect! Thanks Ying.
There's some left padding needs to be done. I want comment text, reply button and sub-comment boxes to be aligned with metadata.
Also top padding need to be fixed for dashed border.
Please guide further.

Hi there,

You can try this CSS:

.comment-content {
    margin-left: -10px;
}

And adjust the value to your preferred alignment. (-10px seems to align it w/ metadata)

Thanks Elvin.
And how can I add top padding in pink dashed border comment box?

I'm not sure I understand what you mean.

If it's for the comment list container, you can try this CSS:

ol.comment-list {
    padding-top: 30px;
}

If it's for the first comment, try this:

ol.comment-list li:first-child {
    padding-top: 30px;
}

If it's for all comments, try this:

ol.comment-list li {
    padding-top: 30px;
}

Thanks, Elvin! It's done.

Nice one. No problem. :D