Styling issues with How-To block

#230342
  • Resolved Amanda E
    Rank Math pro

    Hi, I just migrated from Yoast SEO and am trying to recreate a numbered list with some custom styling to my how-to block (example of style here: https://ibb.co/jHdpYfL). I’ve been able to complete most of the customizations, but can’t seem to get the styled numbers to show up – am I anywhere close with the code below?


    ul.rank-math-steps,ol.rank-math-steps {
    list-style-type: none;
    counter-reset: rowNumber;
    margin-left: 0;
    }
    .rank-math-step {
    position: relative;
    padding-left: 48px;
    &:not(:empty):before {
    display: inline-block;
    position: absolute;
    width: 30px;
    left: 0;
    content: counter(rowNumber);
    counter-increment: rowNumber;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 1;
    padding: 8px;
    background: #c7c2b5;
    border-radius:100%
    }

Viewing 1 replies (of 1 total)
  • Prabhat
    Rank Math agency

    Hello,

    Thank you for contacting us.

    Could you please confirm if you’re saying that the numbers with the green background (counter numbers) are not showing on the frontend of your website?

    Also, please share the affected URL so that we can check this on our end.

    Looking forward to helping you.

    Thank you.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 1 replies (of 1 total)

The ticket ‘Styling issues with How-To block’ is closed to new replies.