[Resolved] Author Box

[Mangesh Kumar]

Hey

I have added the author box in my theme. I did it correctly. Just facing 2 issues. Here is the current screenshot of author box:- https://paste.pics/87971da2e51a09f202d4490a433795c6

I want to decrease the gravatar size so that the text which is showing below the image can be fixed like this:- https://masterblogging.com/black-friday-deals/.

the second thing I want to remove that “by” from the “by Mangesh Kumar Bhardwaj”.

This is the element i am using right now. `<div class=”author-box”>
<div class=”author-box-avatar”>
<?php echo get_avatar( get_the_author_meta(‘user_email’), ‘130’, ” ); ?>
</div>
<div class=”author-box-description”>
<h5><span class=”author-box-by”>by</span> <?php the_author_link(); ?></h5>
<?php the_author_meta(‘description’); ?>
</div>
</div>`

this is the current css

.author-box{  
    background: #ffffff;
    padding: 40px;
    overflow:hidden;
}
.author-box-avatar{
    float: left;
    margin: 0 15px 0 ;
}
.author-box-avatar img{
    border-radius:100%;
    border:3px solid #1E73BE;
}
.author-box-description h5{
    font-size:24px;
    margin-bottom: 10px;
    font-weight: bold;
    text-transform: capitalize;
}

[David]

Hi there,

1. In your code you will see this:

<span class="author-box-by">by</span>

Remove it.

2. Try this CSS – i have commented the line that controls the size of the avatar:

.author-box {
    background: #fff;
    padding: 40px 0;
    overflow:hidden;
    display: flex;
}

.author-box-avatar {
    flex: 0 0 15%; /* size of avatar */
    margin:0 15px 0;
}

.author-box-avatar img {
    border-radius: 100%;
    border:3px solid #1E73BE;
}

.author-box-description h5 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 700;
    text-transform: capitalize;
}

[Mangesh Kumar]

Thanks, David your support it awesome.

[David]

Glad to be of help

[Mangesh Kumar]

Hey David

The problem is solved in desktop and laptop. But when I open the same thing on mobile devices it look very bad.

Here is the result:- https://snipboard.io/VjKTkm.jpg

I want to come image in the centre in mobile and then the author box content.

[David]

Add this CSS:

@media (max-width: 600px) {
    .author-box {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .author-box-avatar, 
    .author-box-description {
        flex: 1 0 100%;
    }
}

[Mangesh Kumar]

thank you. you are awesome.

[David]

you’re welcome

[nutt]

do you use author box plugin? and which one?

Thank you

[David]

Hi there,

that user followed a similar method as explained here:

https://generatepress.com/forums/topic/author-box-4/#post-1306725

[Author]

Posts