Make blog author profile image circle larger?

Hi

I really like the circle style of the author profile image for blogs but its just so small.  

 Is there a simple code just to enlarge this circle - maybe double the size  (and not change anything else about the profile), in 7.1?

Thanks
 

On 8/9/2021 at 5:58 AM, OliviaRichards said:

Hi

I really like the circle style of the author profile image for blogs but its just so small.  

 Is there a simple code just to enlarge this circle - maybe double the size  (and not change anything else about the profile), in 7.1?

Thanks
 

Hi. Can you share link to a blog post? We can check easier

those author profile images at the bottom of the blogs are 50px, so to double them to 100px you need to use add some rules to your custom css (from the main Design menu).

.blog-item-author-profile-wrapper .author-avatar {
  width:100px;
  height:100px;
}

.blog-item-author-profile-wrapper .author-avatar img {
  width:100px !important;
  height:100px !important;
}

obviously you can change the 100 to whatever you like.

@iamdavehart Thanks for this. It made the image within the circle bigger, but not the actual circle.
Could you help please?

See the live site here: https://www.honeylane.com.au/blog/introducing-the-dark-horse-vineyard

Many thanks,

Tara

@TDavy your profile images look ok on your site, so looks like you fixed it. do you still need any help on this?

@iamdavehart I tried using your code on my site - https://www.ridingwithagents.com/blog/top-10-neighborhoods-for-young-professionals-moving-to-austin and it kinda worked...the problem is it seems to be distorting the image. Any ideas? Also, is there a way to move my author link to under my name?

can't see the example on your site as there's no author profile on there, but the code still seems to work when I tested it out. what do you mean by distorted? if the aspect ratio is off make sure you've changed all instances of "100" in the code to be the same value.

if you want to move the link about you can add another rule to the code to move the bio down (same thing as moving the link up)

div.author-bio {
  order:100;
}

@iamdavehart Hi Dave! Thanks for this. It's also distorting my author avatar (see attached image), even with all numbers set to 100. It gives it a bulging/fish eye effect, which is something I've never seen with CSS!

@ShanesadamsHere's my recommended CSS for removing the author bio:

Quote

/* Url */
a.author-website {
    display: none;
}

I suspect that the avatar you have for your profile isn't square, so when we set the img width and height directly it distorts the picture. to fix this you can either make sure that you set your images widths correctly, or probably more easily, set the object-fit properties then you should find it works

.blog-item-author-profile-wrapper .author-avatar {
  width:100px;
  height:100px;
}

.blog-item-author-profile-wrapper .author-avatar img {
  width:100px !important;
  height:100px !important;
  object-fit: cover;
  object-position: center;
}