WordPress.org

Forums

Comments: Avatar is blocking name (TwentyFourteen) (9 posts)

  1. KSeiersen
    Member
    Posted 10 months ago #

    In the comments section (TwentyFourteen theme), the avatar is blocking the name of the person commenting. Screenshot here:

    http://www.scienceblog.dk/Error_avatar_in_comments.png

    How can I change this? I have never noticed it before; did it come with an update or something?

    ---Klaus

  2. Spireaci
    Member
    Posted 10 months ago #

    Hi KSeiersen

    Add this in your chid theme css

    .avatar {
        margin-left: 0;
    }

    This should definetely work. see here
    http://imgur.com/bD5bYf3

    Cheers!

  3. KSeiersen
    Member
    Posted 10 months ago #

    Thanks!

  4. KSeiersen
    Member
    Posted 7 months ago #

    So, this problem has returned after upgrading to theme Twenty Fourteen 1.2.

    CSS-file has this:

    .comment-author .avatar {
    border: 1px solid rgba(0, 0, 0, 0.1);
    height: 18px;
    padding: 2px;
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    }

    Tried adding margin-left:0; but nothing changed. Any suggestions?

    ---Klaus

  5. Spireaci
    Member
    Posted 7 months ago #

    Hey KSeiersen,

    either

    img.avatar.avatar {
    margin-left: 0;
    }

    or

    .comment-author .avatar {
    margin-left: 0;
    }

    should do the trick. see here http://imgur.com/a8kQpU3

    but,

    to avoid "returning" after updating the theme in the future, you should add either one of these in the style.css of your child theme

    you can learn here how to do this: http://codex.wordpress.org/Child_Themes

    hope this helps,
    Cheers!

  6. KSeiersen
    Member
    Posted 7 months ago #

    Thanks.

    Any idea why this is happening to my blog, and not something all other TwentyFourteen users experience?

    I haven't really changed anything to the main layout. Could it be one of my widgets?

    ---Klaus

  7. Spireaci
    Member
    Posted 7 months ago #

    Hi,

    I looked into it and it seems that what is different from other TwentyFourteen implementation is that you have this

    media="all"
    .avatar {
    margin-left: 53px;
    }

    in your css. do you remember to have done this yourself or maybe - like you suggested - using a plugin/widget that affects how avatars are displayed?

    if you could remove the above selector - you would not need to apply the "fix" anymore - should be safe after updating too :)

    Cheers!

  8. Spireaci
    Member
    Posted 7 months ago #

    yup! I think I found it!

    looks like "simple-twitter-tweets" plugin adds this piece of CSS that affects your avatars.

    Try disabling the plugin, remove the fix (margin-left: 0), and see if everything looks right.

    Then, of course, you can decide if you want to keep the plugin (using the fix every time), edit the plugin's minified CSS (wp-content/plugins/simple-twitter-tweets/stt.min.css) or look for another similar plugin:)

    Nice blog- by the way,
    Good luck!

  9. KSeiersen
    Member
    Posted 6 months ago #

    Thanks so much!

    ---Klaus

Reply

You must log in to post.

About this Topic