Hello,
Thanks for contacting us.
Please use the CSS code given below in the Additional CSS section of your Customizer to apply the styling to breadcrumbs:
.rank-math-breadcrumb {
font-size: 30px!important;
padding-top: 10px!important;
}
.rank-math-breadcrumb p span {
padding-left: 20px!important;
}
Hope this helps. Let us know if you need any further assistance.
Hello Jaideep,
I used the above CSS in the Additional CSS (deleted p span as it was spreading the breadcrumb) It works beautifully on the Mobile view. https://prnt.sc/1r0c13o
However, there is no change in the Desktop and Tablet view, it is still at the extreme left. https://prnt.sc/1r0c5kh
The given CSS has no effect on other devices except Mobile.
Can you also add code for ellipse (….) so the breadcrumb occupies only one line without spill over.
Thanks,
Amrik
Hello,
Can you please share the URL of one of your posts/pages with breadcrumbs so I can check?
You can also try using the CSS given below. Remove the previous one and only use this:
.rank-math-breadcrumb {
font-size: 30px!important;
padding: 10px 0px 0px 30px!important;
}
This should work fine. Let us know if it doesn’t. We are here to assist.
Thanks.
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.
