• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  1. Kristie Hill says

    September 19, 2014 at 7:31 pm

    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!

    Log in to Reply
    • Brad Dalton says

      September 19, 2014 at 7:50 pm

      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.

      Log in to Reply
  2. Mukesh Mali says

    September 15, 2014 at 5:09 pm

    how can hide Website box in comment form …. likes yours ….. ????

    Log in to Reply
    • Brad Dalton says

      September 15, 2014 at 5:13 pm

      Use the PHP code in this tutorial

      Don’t re-publish it please.

      Log in to Reply
  3. Rick R. Duncan says

    September 14, 2014 at 12:47 pm

    Very easy tutorial to follow and works perfectly. Thanks for the tut Brad!

    -rick

    Log in to Reply
    • Brad Dalton says

      September 14, 2014 at 12:49 pm

      You’re welcome Rick.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.