[Resolved] Author Box

[demoxing]

Hello,
I want to make my author box looks like my “related post“. the related post has a nice background box with a shadow effect, I want to add the same effect on my author box as well. how to do that?

related post CSS:

.wpsp-related-posts1 {
    background-color: #fff;
    padding: 24px 20px 10px 20px;
    margin-top: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

author box CSS:

.author-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 4%;
    margin-top: 30px;
    font-size: 1em;
    box-shadow: 0 9px 28px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.author-links a {
    font-size: 3em;
    line-height: 0.5em;
    float: right;
}

.author-box .avatar {
    width: 30px;
    border-radius: 100%;
    margin-right: 20px;
}

.author-title {
   font-weight: 700;
}

h4.author-title {
    margin-bottom: 0.5em;
}

.author-description {
	margin-bottom: 10px;
}

/* For Mobile Devices */
@media (max-width: 768px) {
    .author-box {
        flex-direction: column;
        text-align: center;
	padding: 50px 10px;
    }

    .author-box .avatar {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
	margin-top: -35px;
    }

    .author-box .avatar img {
        max-width: 70px;
    }
}

reference: https://imgur.com/gn51IDO

[Suraj Katwal]

Use box-shadow: rgba(23, 43, 99, .14) 0 7px 28px; in .author-box

[demoxing]

how to make them separate? I mean the author box and the related post section?

View post on imgur.com

[David]

Hi there,

in your HTML – the WPSP related posts is inside the HTML <div class="author-box">.
Move the WPSP HTML below the closing </div> of the author container

[demoxing]

didn’t get you david, can you explain a little bit more? and what is WPSP?

[demoxing]

<div class="author-box">
	<div class="avatar"><?php echo get_avatar( get_the_author_meta( 'ID' )); ?></div>
 
        <h5 class="author-title"><?php printf( esc_attr__( '%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 class="author-links">
 
 
    </div>
 
</div>

what I have to do here?

[David]

Aah its some broken HTML.
Delete this line:

<div class="author-links">

[demoxing]

David has every problem solution xD thanks man, as always your solution worked.

[David]

Glad to hear that 🙂

[Author]

Posts