Frequently Asked Questions:

FAQ: How to change the font size in your comments area

Nicole just left a comment asking how to adjust the font-size for her comments area.  I thought that was a very good question, and one I’ve been asked a few times, so I’m writing it up here for everyone’s benefit.

There are two places you may want to change the font-size in your comments area.  The first is in the area that lists how many comments and has the “show comments” and “add a comment” text, as shown below:

The second area, is the actual comments themselves, show below:

To change the font size in these areas, open up your Stylesheet in your Theme editor by going to “Design” => “Theme Editor” after loggin into your WP Admin area.  Once you’re in your Theme editor, from the right-hand side choose to edit the file called “Stylesheet (style.css)”.

Scroll all the way to the bottom, put your cursor at the end of the line and press return a few times to get on a new line.  Then paste in this chunk of code:

/* font size for comments area */
.meta-inner {
font-size:13px;
}

Adjust the number 13 to whatever size font you want.  This will affect both of the areas I discussed above.  If you’re OK with both areas having the same font size, you’re all set.  Just view your blog (remember to force your browser to refresh so you can see your changes) and check your work.

If you want the font size for your actual comments (picture 2 above) to be different from the other area (picture 1 above), you’ll need to add another chunk of code, like so:

/* font size for only comments */
.meta-inner #comments {
font-size:12px;
}

Again, adjust the number 12 to whatever you want, save the changes, view your blog and refresh your browser to check your work.

Related posts:
Change comment text color,
Display comments by default,
Comments aren’t working

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

18 Responses to “FAQ: How to change the font size in your comments area”

  1. On Nicole said:

    WOW…thanks for the prompt response. Off to try it now.

  2. On Renee said:

    thanks for that :-)

  3. On Nicole said:

    Hmmm…I don’t know what I’m doing wrong but for some reason, even with the following html added, my font stays the same size. There is no difference.

    /*styles sidebar-footer links */
    #sidebar_footer a:link {
    text-decoration: none; /* no underlining default */
    color: #3333CC; /* color of links not yet visited */
    }
    #sidebar_footer a:visited {
    text-decoration: none; /* no underlining default */
    color: #663399; /* color of links already visited */
    }
    #sidebar_footer a:hover {
    text-decoration: underline; /* underlining as hover default */
    color: #000000; /* color of links when being hovered over */<

    /* font size for comments area */
    .meta-inner {
    font-size:15px;
    }

    What could I be doing wrong?

  4. On Jared said:

    @Nicole: on the sixth line from the bottom of that code there is a “<” that shouldn’t be there at the end of the line. try removing that and see if it works.

  5. On Nicole said:

    I seem to have it working now. I think the problem was that prior to attending to the comments section I had made some changes to my html code at the bottom to change the colour of the font in the footer section which would have been different to the end of the ’standard’ html code. Therefore, I changed where I placed the above hmtl code. I placed it straight after this….(which would have been the end originally!)

    div#footer{text-align:center;}

    Now it works!

  6. On Dinofa said:

    hey jared:

    is there a way to just change the ( ADD COMMENT ) type so that is a larger size then the rest of the comments area?

  7. On Jared said:

    @Dinofa: just add a line in your styleshheet that says this:

    .commentform_link {font-size:44px;}

    but change 44 to whatever size you want.

  8. On Rebecca said:

    Hi Jared,

    I can’t figure out what I’m doing wrong. I’ve tried changing the background color to my comments and it doesn’t work. And my comments look completely unformatted and unstructured and with an abnormally large space between lines. I would also like it to just give the person’s name and then comment and leave out the “posted the following on (date) at (time)”, and to have the person’s name and the comment on the same line instead of name above and comment below.

    BTW - this theme is so amazing! I get so many compliments on it! You rock!!! :)
    Thank you in advance for helping me!

  9. On matt said:

    Hi there,

    I actually have the same question as Rebecca- is there any way to customize/modify the layout of the comments? Mine are also all spaced out and I would love to simplify the information for each comment (name, comment).

    Thanks so much guys, keep up the good work Jared!

  10. On Jared said:

    @matt: i can’t see your blog cuz you didn’t leave your blog address, but i’m guessing your problem is that you have a setting set incorrectly. go do “design” => “awp management” => “comments” and make sure that you have “use a custom AWP template for your theme” checked and saved. that’s usually the problem when people describe what you are describing.

  11. On Jared said:

    @Rebecca: i looked at your blog, and i’m guessing that you’re referring to the appearance of the comments on the single post permalink pages, not the main pages, right?

    the instructions with the theme for customizing comment color etc only affect the way the comments appear on the home page. the theme was not built to have the comments look the same on the main pages as on the permalink page.

    does that make sense?

  12. On Andrea said:

    Hey Jared!

    First question -

    I don’t know what I did, but how do I get the row of
    ” By admin | Posted in Uncategorized | Edit | 1 comments ”

    to become closer to the photo. There is a large space between the photo and this picture.

    Second question - What if I don’t want the whole world to see what I tagged a post with? Is there a way to hide that, but still have the benefits of having it?

    – hope this makes sense!
    Thanks. Andrea

  13. On Jared said:

    @Andrea: i’m not totally sure why that is so far away… i fiddled for a while trying to figure it out. you can add this line into your stylesheet to move it up a little bit:

    .meta-inner { margin-top:-30px !important; }

    it’s not perfect but it will help a little.

    about your tag question - there is no benefit to tagging your posts and then hiding the tags.

  14. On phototristan said:

    I would like to change the size of the comment headings on the single page. The part that says “One Comment” and “Leave A Comment” on each post. How can I do this? Thanks!

  15. On phototristan said:

    Also, can I make the spacing between each comment smaller (on each post page, not index)?

  16. On Jared said:

    @phototristan: these are kind of advanced customizations, so there is no super simple answer. search this blog for “firebug” and watch that tutorial, and that should help you figure it out!

  17. On Juliana Pessoa said:

    Hello Jared, I´ve got another question.

    Can i get to always show my comments just like the second post from this blog?
    http://lisarussophotography.com/blog/

  18. On Jared said:

    @Juliana Pessoa: yeah, check the FAQs under the “comments” section.

Leave a Reply