[Resolved] author box

[Shivam]

My author box looks something like this – https://nimb.ws/63rSK5

I want to make it like this- https://masterblogging.com/black-friday-deals/

Please help

[Tom]

Hi there,

How are you adding the author box? It looks like you need to wrap the avatar and description in one <div> element. If you can share your code here, I can help you tweak it.

[Shivam]

<div class="author-box">
	<?php 
	
	global $post;
	
	$author_id = $post->post_author;
	
	?>
	
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
	
				<div class="author-summary">
	
        <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
 
        </div>
 
    </div>

[Tom]

Try changing it to this:

<div class="author-box">
    <div class="avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ) ); ?>
    </div>
 
    <div class="author-info">
        <h5 class="author-title"><?php printf( esc_attr__( 'About %s', 'the author' ), get_the_author_meta( 'display_name') );?></h5>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p>
        </div>
 
    </div>
</div>

Then change your CSS to this:

.author-box {
    padding: 4%;
    margin-top: 60px;
    font-size: 1em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

[Author]

Posts