[Resolved] Author Box

Home Forums Support Author Box

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1405557
    Bijit Chakraborty

    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

    #1405576
    Suraj Katwal

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

    SEO, WordPress Optimization, Blogging Tutorials.
    GeneratePress Tutorial: https://www.wplogout.com

    #1405586
    Bijit Chakraborty

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

    View post on imgur.com

    #1405935
    David
    Staff
    Customer Support

    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

    #1405954
    Bijit Chakraborty

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

    #1405962
    Bijit Chakraborty
    <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?

    #1405998
    David
    Staff
    Customer Support

    Aah its some broken HTML.
    Delete this line:

    <div class="author-links">

    #1406089
    Bijit Chakraborty

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

    #1406117
    David
    Staff
    Customer Support

    Glad to hear that 🙂

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