Image style in FAQ and HowTo

#169881
  • Resolved Unbosomjam
    Rank Math free

    Hi
    I’d like to add css only to images in FAQ and HowTo.
    But the “Styling Options” only includes “Title Wrapper” , “Content Wrapper” and “List”.
    There is no for “image”.
    Actually , I’d like to add box-shadow to images.
    So , how can I achieve that?
    Is there a way to apply on all FAQ and HowTo images?

    Thanks in advanced.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Hello,

    Thank you for contacting the support, and sorry for any inconvenience that might have been caused due to that.

    For the your CSS to work on the images, you may need to include “img” in your selector. You may refer to this sample code:

    /* For FAQs Block */
    .rank-math-answer img{
        box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
    }
    
    /* For HowTo Block */
    .rank-math-step-content img{
        box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.8);
    }

    Hope that helps and please do not hesitate to let us know if you need our assistance with anything else.

    Hi Jeremy
    Thank you for quick reply.That’s very helpful.

    There is still a further question.

    I remember that image in FAQ Answer used to be that when the width of the image is small(maybe only 50% of desktop screen), it will line up with the text.
    I don’t know from which time after the update, even the small width image will be forced to be placed above the text.
    I would like to ask if there is any way to make the image and texts in the FAQ Answer line up?
    Or set specific image and texts side by side on demand without affecting other FAQs?

    Thanks again.

    Hello,

    Thanks for getting back to us.

    If you want to have the text side by side with the image you could try adding the following CSS rules to the ones already present in that class:

    
    /* For FAQs Block */
    .rank-math-answer img{
        float: left;
        margin-right: 35px;
    }
    

    This would float the image to the left and the text would be present on the right and the margin is just so the text has more breathing room.

    Hope this helps solve your issue.

    Don’t hesitate to get in touch if you require any further assistance.

    Hi Miguel
    It does work,Thank you so much.
    But if I’d like to have the text side by side with the image “only apply on specific FAQ “, is there a way to find its class ?

    Hello,

    Thank you for the follow-up, and sorry for the delay.

    You can target the specific image by using its class. Please try this CSS code from your example:

    
    #faq-question-1599580179408 img{
        float: left;
        margin-right: 35px;
    }

    I hope that helps. Thank you, and looking forward to your update.

    Hi Reinelle
    That’s awesome!!
    Thank you so much.

    Anas
    Rank Math business

    Hello,

    We are super happy that your issue is resolved. If you have any other questions in the future, know that we are here to help you.

    If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.

    If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

    Thank you.

Viewing 7 replies - 1 through 7 (of 7 total)

The ticket ‘Image style in FAQ and HowTo’ is closed to new replies.