Archived topic
Author Box Help
5 replies · Started by Hugo on April 16, 2021
Hey guys, Thanks for all the recent help you have provided here.
When you check my author box on your laptop and tablet, it looks fine, but if you check on mobile, you have one of the buttons broken.
I have copied the code I have been using to see if you can spot the problem. I want the buttons "More about Hugo" and "Join my Facebook Community" to be under each other on mobile.
Thanks in advance for the help.
Hi there,
try adding this CSS:
.author-box-social a {
flex: 1 0 100%;
margin: 5px 0;
text-align: center;
}
@media(max-width: 600px) {
.author-box-social {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}Thanks David. It worked well.
I am not sure if this is with you guys, but my profile picture in the author box looks blurry. That happens with any pic I try. Is that anything I need to swap or add in CSS?
What code are you using to add the author box ? as its loading the 96px sized image, so resizing it larger will make it blurry
All the code that I have add is this.
The image is the one on my gravatar account.
I meant the code that is displaying the HTML - this must be added to a hook ?
Within that code there will be a line that looks like:
get_avatar( get_the_author_meta( 'ID' ))
Change it to:
get_avatar( get_the_author_meta( 'ID' ), 150 )
the 150 will set the size of the image that is requested to 150px. You can change that what size you require.
