how to add space and caption after final image in howTo schema?

#527583
  • Resolved Deep
    Rank Math free

    After “final image” there is no space between the image and text in howTo schema. How to add space, and also caption for that image?

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

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

    You can use the following custom CSS on your site to create space between the image and text on howTo block:

    .rank-math-step-content img {
        padding-top: 20px;
        padding-bottom: 20px; 
    }
    

    Here’s a tutorial on how can you use this custom CSS on your site:
    https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

    Regarding to the caption, you can add a caption for the image in the howTo schema from your media library.

    Hope that helps and please don’t hesitate to let us know if you have any other questions.

    Thank you.

    ​​​​​​​

    Deep
    Rank Math free

    Hi, Thanks for looking into this!

    This code is not working:

    .rank-math-step-content img {
    padding-top: 20px;
    padding-bottom: 20px;
    }

    There is still space between image and text. And I tried writing caption as you mentioned above, but no caption is showing after the image when I preview post in WordPress.

    Hello,

    Can you please try to use the following CSS and see if that works?

    .rank-math-step-content img {
       padding-top: 20px !important;
       padding-bottom: 20px !important;
    }
    

    Also, please try to share your page URL with us so we can check this further.

    Regarding to the caption issue, I’m sorry for the confusion earlier. Unfortunately the image caption will not appear in frontend on your howTo block. If you set the caption from the media library, it will be applied only on your howTo Schema which you can test with Google’s Rich Results Test.

    Let us know how it goes. Looking forward to helping you.

    Thank you.

    Deep
    Rank Math free

    Hi there!

    I tried this CSS and it worked!

    .rank-math-step-content img {
    display: block;
    margin: 0 auto 15px auto;
    }

    Now there is space between image and text. And thanks for the reply regarding image caption issue!

    You can close this ticket if there is no other way for the image caption to appear in frontend on howTo block.

    Thanks

    Hello,

    We are glad that you were able to fix the spacing issue.

    The image of the HowTo block doesn’t support captions. I have shared this as a feature request with the development team and will inform you if we decide to implement this in our plugin.

    Don’t hesitate to get in touch in case you need our assistance with anything else.

    Thanks.

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

The ticket ‘how to add space and caption after final image in howTo schema?’ is closed to new replies.