GeneratePress Author Box CSS Code

 Today you will learn how to customize your blog author box using some line of coding and CSS. After applying this your author box will going to be very professional like bloggingskill.com.

GeneratePress Author Box CSS Code

/* bloggingskill author box*/

.bloggingskill-author-box {
	padding: 3%;
	padding-bottom: 10px;
	margin-top: 30px;
	font-size: 0.9em;
	background-color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
    box-shadow: rgb(23 43 99 / 30%) 0 2px 10px;
    border-radius: 25px;
}

.bloggingskill-author-box .insights-avatar {
	width: 250px;
	height: auto;
	border-radius: 100%;
	margin-right: 30px;
}
.bloggingskill-author-box .insights-avatar img {
		border-radius: 100%;
	}
.author-title {
	margin-bottom: 0.1em;
	font-weight: 500;
	font-size:18px;
	font-weight:bold;
}
.author-description {
	line-height: 1.6em;
	font-size:16px;	
}
.author-links a {
	margin-top: -2em;
	font-size: 14px;
	line-height: 2em;
	font-weight:bold;
	color: #26BC00;
	float: left;
}
@media (max-width: 768px) {
	.bloggingskill-author-box {
		padding: 20px;
		padding-bottom: 25px;
		margin-top: 60px;
		margin-bottom: 60px;
		flex-direction: column;
		text-align: center;
	}
	.bloggingskill-author-box .insights-avatar {
		margin-right: 0;
		width: 100%;
		margin-top: -60px; 
	}
	.bloggingskill-author-box .insights-avatar img {
		max-width: 100px; 
	}
	.author-links a {
		float: none;
		align-self: center;
	}
	.author-description {
		margin-bottom: -0.1em;
	}
}
/*end of bloggingskill author box*/

GeneratePress Author Box PHP Script

<div class="bloggingskill-author-box">
    <div class="insights-avatar">
        <?php echo get_avatar( get_the_author_meta( 'ID' ), 250 ); ?>
    </div>
    <div class="insights-author-info">
        <div class="author-title" itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name"><?php printf( get_the_author_meta( 'display_name') );?></span>
        </div>
        <div class="author-summary">
            <p class="author-description"><?php echo wp_kses( get_the_author_meta( 'description' ), null ); ?></p></div>
<div class="author-links">
            <a href="https://bloggingskill.com/about-us/" title="Read more about this author">Read More</a>
       </div>
    </div>
</div>

GeneratePress Author Box Video Tutorial