How to create space around gravatar on mobile in author box

[mmash34]

Hi, I’m using the author shortcode at the bottom of the some of my articles when they are written by a guest. At first, the gravatar wasn’t showing up at on on mobile. But then I added this CSS and now it shows the gravatar on mobile.

@media (max-width: 480px) {
.x-author-box .avatar {
display: block;
}
}

My problem now is that there’s not enough space around the gravatar on mobile and it doesn’t look professional (see screenshot image).

Here’s the URL: https://barbellrehab.com/hip-thrust-acl-reconstruction/

So my question is, what CSS do I need to add to create some space around the gravatar in the author box on mobile so it looks “cleaner.” Thanks!

[ruenel]

Hello Michael,

Thank you for the very detailed post information. The avatar is using float and has no margin. You muse include float: none and some margin in your code:

@media (max-width: 480px) {
  .x-author-box .avatar {
    display: block;
     float: none;
     margin-bottom: 20px;
  }
}

This code is just an example to get you started with your customizations. You will have to maintain this code.

Hope this makes sense.