Hello,
Thank you for contacting Rank Math for help with the appearance of your FAQ blocks.
To style the FAQ blocks, you will need to add custom CSS. You can follow this guide for how to add custom CSS to your website: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
Hope that helps. Please let us know if you have questions.
Hello,
You can also try this CSS code for a start to make it looks like the one on Rank Math using custom CSS:
#rank-math-faq {
background: #eaeaea;
border-radius: 15px;
padding: 10px;
margin-bottom: 1rem;
}
.rank-math-list-item {
background: #ffffff;
padding: 15px 15px 20px;
margin-bottom: 1rem;
border-radius: 1rem;
}
Here is how your FAQ block should look like once you add the CSS code: https://i.rankmath.com/VIcYvq
I hope that helps.
Thank you.
Thanks a lot Reinelle. It looks awesome now.
Can you also please share the custom code for “How To Schema” of rank math? I would really appreciate it.
Hello,
This will require further CSS modification for HowTo blocks. You may refer to these CSS selectors (example) and style the block as per your liking:
.rank-math-steps {
background: #eaeaea;
...
}
.rank-math-step-title {
color: #000;
...
}
.rank-math-step-content img{
border-radius: 10px;
}
.rank-math-step-content p{
margin-top: 10px;
}
Hope that helps and please do not hesitate to let us know if you need our assistance with anything else.
Thanks a lot. All issues are resolved.
Hello,
Glad that helped.
Please feel free to reach out to us again in case you need any other assistance.
We are here to help.
Thank you.
