[Resolved] more comment formatting questions

[Melissa]

Sorry to keep pestering you.

On my page, how can I format the comment button? I want it to look like the load more button at the bottom of the page.

Also, I can’t seem to get the css correct for making the margin on the comment text smaller. Can you check this?

Thanks!

[David]

Hi there,

try this CSS for the Comment Submit button:

input[type="submit"] {
    padding: 5px 15px !important;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    font-size: 16px;
}

You have this CSS added for the comment left and right margin in your Additional CSS:

.single-post div[itemprop="text"] p {
    margin-left: 19%;
    margin-right: 19%;
}

Switch the 19% to a smaller % or PX unit.

[Melissa]

The first fix worked great.

However, with the margin issue, the current CSS affects both the post text and the comment text. How do I shrink the margin for just the comment text?

[David]

Instead of the above CSS use this to target just the P tags within the entry content:

.single-post .entry-content p {
    margin-left: 19%;
    margin-right: 19%;
}

Then you have this CSS already in place for styling the comment content:

.comment-content {
    border: none;
    padding: 10px;
    margin: 16px;
}

[Melissa]

Perfect, thanks!

I’m new at CSS, obviously.

[David]

Glad to be of help 🙂

[Author]

Posts