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.
Perfect timing! I just commented on Brian’s blog about how much I loved his comment box inline. It has been on my to do list to go steal – borrow – uhh… inspect his code and implement it on my blog. Now, I’ll just use this. THANKS!
Its very different. Never seen one like that before.
I guess you could modify this code, add a full width background color and make it look something like what Brian has.
I wanted to make a really small comment form that can be inserted between paragraphs using a shortcode which i will do at some stage.
how can hide Website box in comment form …. likes yours ….. ????
Use the PHP code in this tutorial
Don’t re-publish it please.
Very easy tutorial to follow and works perfectly. Thanks for the tut Brad!
-rick
You’re welcome Rick.