need change font size for answers in faq schema

#63193
  • Resolved Siyamak
    Rank Math free

    hi
    i use rankmath for faq schema with visual composer. in visual composer i have to use gutenberg element for use of rank math faq.
    my problem is i cant change answers fonts size!! in gutenberg block i only could change fonts color.
    how could i change font size for answers in rankmath faq in gutenburg element for visual composer?
    i sent you a link that shows the problem. (you could find faq on top of google map)

Viewing 15 replies - 1 through 15 (of 16 total)
  • Alberto
    Rank Math business

    Hello,

    You can use CSS to customize the style of the FAQ Block. For example, a few days ago I shared in this thread (https://support.rankmath.com/ticket/faq-can-i-use-page/) a code to customize the FAQ to look and act like an accordion FAQ.

    You could use that code and/or customize it to match your needs.

    Looking forward to help you.

    hi alberto
    the accordion is nice effect for this faq and i tried those codes but i had problem
    i use child theme in rtl format because my language is persian.
    in childe theme files i found style.css and rtl.css
    i put the style code you mentioned on both (first in style css then rtl css and in both toghether) after that faqs on my site goes to accordion effect look but the click dont worked on questions so i put that code you told we have to put in function file, so i put that in child theme`s function but click dont worked at all!!
    so i force to delet all them.
    what is your idea it happened like that?
    (i have to put them in child theme cause for future theme update dont make them delete)

    another question which part of that codes i could set font size for answers?

    (sorry for my bad english)

    Hello,

    Thank you for contacting Rank Math.

    For the click to work you will need to also add the JavaScript hook shared in the thread.
    To change the font of your answers, you can modify it under:

    #rank-math-faq .rank-math-answer {
        padding:0;
    }

    Looking forward to helping you. Thank you.

    hi michael
    i use this in style.css in child theme
    #rank-math-faq .rank-math-list-item{
    position:relative;
    }
    #rank-math-faq .rank-math-list-item input{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 41px;
    opacity: 0;
    cursor: pointer;
    z-index:999;
    }
    #rank-math-faq .rank-math-list-item h3 {
    background: #f1f2f6;
    padding: 10px 12px 10px 18px;
    cursor: pointer;
    font-size: 18px !important;
    font-weight: normal !important;
    position:relative;
    margin-bottom: 0;
    }
    #rank-math-faq .rank-math-list-item h3:before {
    display:inline-block;
    content: “”;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 12px;
    border-color: transparent transparent transparent #000000;
    margin-right: 8px;
    }
    #rank-math-faq .rank-math-list-item input:checked+h3:before {
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    }
    #rank-math-faq .rank-math-answer{
    padding: 10px;
    max-height: 0;
    overflow:hidden;
    }
    #rank-math-faq .rank-math-list-item input:checked+h3~.rank-math-answer {
    max-height: 100vh;
    overflow:visible;
    }
    div.rank-math-list-item:hover > div.rank-math-answer {
    max-height: 100vh;
    overflow: visible;
    }

    #rank-math-faq .rank-math-answer {
    padding:0;
    }

    then put this in function.php in child them:
    function faq_accordion_hook_javascript_footer() {
    ?>
    <script>
    jQuery(document).ready(function() {
    function faqClickSetup() {
    var faqBlock = jQuery(“div#rank-math-faq”);
    var faqItems = faqBlock.find(“div.rank-math-list-item”);
    faqItems.bind(“click”, function(event) {
    var answer = jQuery(this).find(“div.rank-math-answer”);
    if (answer.css(“overflow”) == “hidden”) {
    answer.css(“overflow”, “visible”);
    answer.css(“max-height”, “100vh”);
    } else {
    answer.css(“overflow”, “hidden”);
    answer.css(“max-height”, “0”);
    }
    });
    }
    }
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘faq_accordion_hook_javascript_footer’);

    do i have to do any more?
    if no, as i said i done them and faqs shows in accordion look but the click action does not work!)

    • This reply was modified 3 years, 9 months ago by Siyamak.

    Hello,

    Thank you for the follow up.

    We would love to look into this closer. Please edit the first post on this ticket and include your WP logins in the designated Sensitive Data section.
    Sensitive Data Section

    It is completely secure and only our support staff has access to that section. If you want, you can use the below plugin to generate a temporary login URL to your website and share that with us instead:

    https://wordpress.org/plugins/temporary-login-without-password/

    You can use the above plugin in conjunction with the WP Security Audit Log to monitor what changes our staff might make on your website (if any):

    https://wordpress.org/plugins/wp-security-audit-log/

    We really look forward to helping you.

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    plz check

    Hello,

    Thank you for contacting Rank Math today.

    I tried creating a test post but I am getting an error of only authenticated users can access Rest API.

    Please update the access limitations so we can help further.

    Looking forward to helping you. Thank you.

    that user name i sent to you is administrator form (like mine) i dont know what is this error for!

    Todd
    Rank Math free

    Hello,

    It could be one of your other plugins causing this.

    Please use this CSS and customize it as per your requirements:

    #rank-math-faq {
        background: #f3f4f5;
        border-radius: 5px;
        padding: 30px 15px;
        font-size:14px;
    }
    .rank-math-list-item {
        overflow: hidden;
        background: #fff;
        border-radius: 5px;
        margin-bottom: 15px;
        padding: 15px 15px 20px;
        box-shadow: 0px 0px 10px #d9d9d9, 0px 0px 40px #ffffff;
        font-size:14px;
    }

    As much as we would love to offer customized solution to each and every user we have, it just isn’t possible for a small company like ours with limited resources. You may have to hire a frontend developer if you are not sure how to edit CSS.

    As for Rank Math, we can only offer support for the feature we offer as part of Rank Math.

    i saw in net this: put it in htaccess file

    <IfModule mod_rewrite.c>
    RewriteEngine On

    RewriteRule .* – [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    RewriteBase /
    RewriteRule ^index\.php$ – [L]

    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>

    could this code solves that problem ? realy i dont know how could i change access limitations and where is it

    • This reply was modified 3 years, 9 months ago by Siyamak.
    • This reply was modified 3 years, 9 months ago by Siyamak.

    hi todd, accordion did not workd but this code:
    #rank-math-faq {
    background: #f3f4f5;
    border-radius: 5px;
    padding: 30px 15px;
    font-size:14px;
    }
    .rank-math-list-item {
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px 15px 20px;
    box-shadow: 0px 0px 10px #d9d9d9, 0px 0px 40px #ffffff;
    font-size:14px;
    }

    was so nice and good 🙂
    thx

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    Alberto
    Rank Math business

    Hello,

    I am happy to see the code Todd shared with you was useful for you. Did it solve your issue? If not, we will continue helping you.

    Looking forward to help you.

    • This reply was modified 3 years, 9 months ago by Alberto.

    hi again alberto, font size with those codes goes well now (thx god)
    but You turned on my greed engine about accordion effects :))
    i have to solve that problem and have that nice effects
    by the way thank you from you and rank math team

Viewing 15 replies - 1 through 15 (of 16 total)

The ticket ‘need change font size for answers in faq schema’ is closed to new replies.