Korpua

On 8/20/2020 at 2:53 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
.blog-item-wrapper .author-avatar {
    border-radius: unset;
    width: 100%;
    height: auto;
}
.blog-item-wrapper .author-avatar img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
.blog-item-wrapper .blog-item-author-profile-wrapper {
    flex-direction: row !important;
    justify-content: space-between !important;
}
.blog-item-author-profile-wrapper>a {
    margin-right: 20px;
    width: 30%;
}
}

 

Hi, I'm using this code to do the trick requested by the OP. 

The only problem is that the Author Name is moved along with the photo to the left-hand side of the Author Bio. I would like to have only the photo on the left, name and Bio on the right scaled same size as the photo. 

In this example I have edited the Bio to include the Author name. That's why it shows double. Gives an idea of the end result. This solution works if a CSS code to remove the Author Name exists. 

The blog is not yet live so I've added a screenshot below. 

Also, is it possible to reduce the white space between the photo and the Name/Bio? It has grown because I have manually scaled back the photo size from 100% --> 75% in width in the code above to make it appear the same size as the Name + Bio combination. Not sure if there is a smarter way to do this?