How to fix round avatars problem

  • Hi there . . .

    I’m using StudioPress’s eleven40 theme, which is here:

    https://demo.studiopress.com/eleven40/

    I can easily make avatars round by adding border-radius to .avatar or to img.avatar. But as soon as I add a border with padding, the image displays with straight edges inside of the round circle made by the border.

    Everything I’m reading says just add border-radius, but nothing seems to address this problem. It looks like both the image and the wrapper with the border need border-radius, but that doesn’t fix anything.

    Any suggestions? I’ve tried asking in the StudioPress forum, but haven’t found a solution yet.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • What you’re reading is right, you do only add border-radius to the CSS rule for those image elements. The way that you’re trying to do it isn’t going to work because any padding is taken as part of the element so as you’ve found if the padding is outside of the image then the image won’t get rounded.

    To get this to owrk you need to apply border-radius to both the image and the images containing element. If there’s nothing around the images now you can add a <div> or similar around the image in your template files.

    Thread Starter Bubble Wrapped

    (@mainmoose)

    Thanks for your help. The div tag that wraps around the avatar is comment-author vcard. I’ll have to create a new div and see if this works.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to fix round avatars problem’ is closed to new replies.

Tags