Decrease breadcrumb text size.

Hi there,

1. You can use this CSS:

.rank-math-breadcrumb a,
.rank-math-breadcrumb span {
    color: #000;
}

2. The alignment is the same, what your seeing is the difference in spacing for the larger title font. If you want you can add a little padding to the meta to move it to the right:

.single-post .entry-meta {
    padding-left: 2px;
}

Hello David,
Thanks for the answer.

1st css didn't work just changed color only.

2nd CSS worked and align the title with the date below it.

I do not need to change the breadcrumb font size now, but I want to align the breadcrumbs text with the date and title text. How can I do it now?

Hi,

I do not need to change the breadcrumb font size now, but I want to align the breadcrumbs text with the date and title text. How can I do it now?

The 2 elements slightly not aligned because there's a CSS that is adding this:

.single-post .entry-meta {
    padding-left: 3px;
}

That said, we either completely remove this so they align.

Or we keep this padding for entry meta also add padding-left: 3px; to the breadcrumbs by adding this CSS:

nav.rank-math-breadcrumb {
    padding-left: 3px;
}

Hello Elvin,
Thank you for your answer. That is really helpful.

.single-post .entry-meta {
padding-left: 3px;
}

seems working fine without any extra css code. I think it's me who is seeing the difference but there's no alignment difference now. I'll check on another computer also if it is not working I'll let you know. Thanks, David and Elvin for the Help.

Guys, I am seriously facing an alignment issue.

Look at my site homepage, the category, archives, etc. The title is not aligned with the pics below it.

See image:

This is a screenshot of from the Browser developer tools, red line added to show the alignment is correct. The spacing is related to the Open Sans font you're using. The site you keep referencing is not using Open Sans, its just using the System Stack fonts.

What should I do?

Well the issue you're having is related to the Open Sans font, you can change the font to see if that improves. The site you referenced, uses the System Stack font, which simply uses the devices local font.

No sir, Changing font is not helping, it seems I can smaller the picture as in the site I had ref.

My colleague Ying had a look and done some tests. Here is her is response:

You title does align with the picture, as David mentioned, the space if from the font.

You can see this with your current font:
https://www.screencast.com/t/DLL6PiRFB1

After I changed your font in develop tools:
https://www.screencast.com/t/pv5XYOzHu

You can have a close look at these 2 screenshots here:
https://www.screencast.com/t/rCABgwMh6Ox

Hello David.
Thank you for replying with such a helpful answer. I have changed my fonts because of this issue.

One last request#
I have shared the screenshot from mobile device.
How can I align that to main title in both mobile and desktop view?

Can you open a new topic for the separate question?

Thanks :)

Done, You may close this thread here.