The CSS in this tutorial enables you to display all 3 comment fields inline as seen in this screenshot:
Here’s the CSS which you can add near the end of your style.css file before your Media Queries:
.comment-form-author,
.comment-form-email,
.comment-form-url {
display: inline-block;
width: 32.9%;
}
.comment-respond,
.entry-pings {
padding: 0;
}
.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
width: 98%
}You could also use this CSS in the Media Queries section of your child themes style.css file so each field displays 100% width once the screen size is 767px or less:
@media only screen and (max-width: 767px) {
.comment-form-author,
.comment-form-email,
.comment-form-url {
width: 100%;
}
}Might need to clear any server/plugin or browser caching if the changes aren’t showing up.
Leave a Reply
You must be logged in to post a comment.