Archived topic
Author Box
9 replies · Started by Mangesh Kumar on May 19, 2020
Hey
I have added the author box in my theme. I did it correctly. Just facing 2 issues. Here is the current screenshot of author box:- https://paste.pics/87971da2e51a09f202d4490a433795c6
I want to decrease the gravatar size so that the text which is showing below the image can be fixed like this:- https://masterblogging.com/black-friday-deals/.
the second thing I want to remove that "by" from the "by Mangesh Kumar Bhardwaj".
This is the element i am using right now. `<div class="author-box">
<div class="author-box-avatar">
<?php echo get_avatar( get_the_author_meta('user_email'), '130', '' ); ?>
</div>
<div class="author-box-description">
<h5><span class="author-box-by">by</span> <?php the_author_link(); ?></h5>
<?php the_author_meta('description'); ?>
</div>
</div>`
this is the current css
.author-box{
background: #ffffff;
padding: 40px;
overflow:hidden;
}
.author-box-avatar{
float: left;
margin: 0 15px 0 ;
}
.author-box-avatar img{
border-radius:100%;
border:3px solid #1E73BE;
}
.author-box-description h5{
font-size:24px;
margin-bottom: 10px;
font-weight: bold;
text-transform: capitalize;
}Hi there,
1. In your code you will see this:
<span class="author-box-by">by</span>
Remove it.
2. Try this CSS - i have commented the line that controls the size of the avatar:
.author-box {
background: #fff;
padding: 40px 0;
overflow:hidden;
display: flex;
}
.author-box-avatar {
flex: 0 0 15%; /* size of avatar */
margin:0 15px 0;
}
.author-box-avatar img {
border-radius: 100%;
border:3px solid #1E73BE;
}
.author-box-description h5 {
font-size: 24px;
margin-bottom: 10px;
font-weight: 700;
text-transform: capitalize;
}Thanks, David your support it awesome.
Glad to be of help
Hey David
The problem is solved in desktop and laptop. But when I open the same thing on mobile devices it look very bad.
Here is the result:- https://snipboard.io/VjKTkm.jpg
I want to come image in the centre in mobile and then the author box content.
Add this CSS:
@media (max-width: 600px) {
.author-box {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
.author-box-avatar,
.author-box-description {
flex: 1 0 100%;
}
}thank you. you are awesome.
you're welcome
do you use author box plugin? and which one?
Thank you
Hi there,
that user followed a similar method as explained here:
https://generatepress.com/forums/topic/author-box-4/#post-1306725
