WP SITES

2899

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Display Comment Form Author, Email & URL Fields Inline

The CSS in this tutorial enables you to display all 3 comment fields inline as seen in this screenshot:

Comment Form Fields Inline

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.

Reader Interactions

Comments

    • 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.

Leave a Reply