How to change the font and size of my author bio?

[learnmechanical2019]

Can you please provide me with the CSS of doing these things.

Thanks in advance.

[lely]

Hi Saswata,

Are you referring to classic author element? If yes, we can use add this on Content page CSS:

.x-author-box .h-author {
    font-size: 120%; /*Adjust this value to your preferred size*/
}

If not for author element, please share the URL so we can give you exact solution. Thank you.

[learnmechanical2019]

Sadly its won’t work, here is the url: https://learnmechanical.com/chain-drives/

And please tell me how to change font style as well as font size.

Thanks in advance

[friech]

Hi Saswata,

Generally the author name, social icons, and author excerpt can be change from Theme Options. The author name is an h4 headline so that inherit the styling from Theme Options > Typography Headings section, while the author excerpt inherit the Theme Options > Typography Body section. If you want to custom style the author box, you can use the selectors below for writing custom CSS.

/*author info box - name*/
.x-author-info h4.h-author {
	color: red;
}

/*author info box - social icon*/
.x-author-info a.x-author-social {
	color: blue;
}

/*author info box - author excerpt*/
.x-author-info .p-author {
	color: yellow;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Cheers!

[learnmechanical2019]

Thank you so much @friech
And thanks for the resources, I love to learn this in my free time.

[christopher]

On behalf of my colleague, you’re welcome .