[Resolved] Author Box

Home Forums Support Author Box

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1292435
    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;
    }
    #1292687
    David
    Staff
    Customer Support

    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;
    }
    #1295289
    Mangesh Kumar

    Thanks, David your support it awesome.

    #1295308
    David
    Staff
    Customer Support
    #1296470
    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.

    #1296569
    David
    Staff
    Customer Support

    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%;
        }
    }
    #1296929
    Mangesh Kumar

    thank you. you are awesome.

    #1296986
    David
    Staff
    Customer Support
    #1319189
    JJ

    do you use author box plugin? and which one?

    Thank you

    #1319430
    David
    Staff
    Customer Support

    Hi there,

    that user followed a similar method as explained here:

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.