FAQ And How-To Module Not Looking Good On My Website

Hello,

We apologize for the inconvenience you’re facing with the appearance of the Rank Math FAQ, How-To, and Table of Contents modules on your website. We appreciate your feedback and are here to help.

To enhance the appearance of these modules, you can add custom CSS code to your theme’s style.css file or use the Additional CSS option available under Appearance → Customize inside your WordPress admin area.

For the FAQ module, you can use the following CSS code:

#rank-math-faq .rank-math-list-item {
    margin-bottom: 1em;
    margin-top: 1em;
    border-bottom: 1px solid #fff;
}

.rank-math-question {
    cursor: pointer;
    position: relative;
    display: block;
    padding-right: 1em;
    margin-right: 1em;
    font-weight: 300;
    margin-top: 30px;
}

.rank-math-question:after {
    position: absolute;
    right: 5px;
    top: 0;
    content: "2715";
    transform: rotate(-45deg);
    transition: all 150ms ease-in-out;
}

.rank-math-question.collapse:after {
    transform: rotate(0deg);
}

.rank-math-question:hover {
    opacity: 0.8;
}

For the How-To module, you can use the CSS rules provided in this link.

And for the Table of Contents module, you can use the CSS code provided in this link.

After adding these CSS rules, your modules should have a better appearance. If you need further assistance, feel free to reach out to us.

Thank you for using Rank Math!

Sources:
How to Turn Rank Math FAQ Block into an Accordion » Rank Math
The #1 WordPress SEO Plugin in 2023 – Rank Math