[Resolved] Decrease breadcrumb text size.

Home Forums Support [Resolved] Decrease breadcrumb text size.

Home Forums Support Decrease breadcrumb text size.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1605343
    linuxwolf

    Hi, I have two questions,
    1. How can I decrease the breadcrumb font size?

    2. I also want to a show align the breadcrumb, title, date in the same equal line. If you see my post, the breadcrumb and date line is a little bit outer than the Post title. It looks like the title is a little inside the line so it is not showing equally written like in alignment to breadcrumb and date.

    #1605611
    David
    Staff
    Customer Support

    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;
    }
    #1605859
    linuxwolf

    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?

    #1605876
    Elvin
    Staff
    Customer Support

    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;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1605898
    linuxwolf

    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.

    #1605916
    linuxwolf

    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.

    #1606379
    David
    Staff
    Customer Support

    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.

    #1606390
    linuxwolf

    What should I do?

    #1606739
    David
    Staff
    Customer Support

    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.

    #1606921
    linuxwolf

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

    #1607637
    David
    Staff
    Customer Support

    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:
    01.05.2021-11.00.14

    After I changed your font in develop tools:
    01.05.2021-11.14.35

    You can have a close look at these 2 screenshots here:
    01.05.2021-11.20.25

    #1608392
    linuxwolf

    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?

    #1608629
    Leo
    Staff
    Customer Support

    Can you open a new topic for the separate question?

    Thanks 🙂

    #1608928
    linuxwolf

    Done, You may close this thread here.

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.