RankMath’s breadcrumbs font

#134677
  • Resolved Sanu
    Rank Math pro

    I am using breadcrumbs with the help of RankMath, I just need to show small text for breadcrumbs only, how can I do that?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Febby
    Rank Math free

    Hello,

    Thank you for contacting Rank Math today.

    You can change your breadcrumbs’ font size by adding the CSS code below into your theme customizer or additional css options.

    Feel free to alter the value 15px based on the size of the font you preferred:

    
    .rank-math-breadcrumb{
    	font-size:15px;
    }
    

    We hope this resolves your issue. Let us know if you need further help.

    Thank you.

    ​​​​​​

    and for mobile device?

    Febby
    Rank Math free

    Hello,

    For mobile devices, you can add this CSS code:

    
    @media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
    .rank-math-breadcrumb{
    	font-size:15px;
    }
    }
    @media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ 
    .rank-math-breadcrumb{
    	font-size:20px;
    }
    }
    

    Additionally, please refer to this article if you’d like to know how to target specific device:
    https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile and add other media queries you want.

    This CSS is also affecting in the desktop version, is there any other code which works for mobile device only. Want to change my font size small in mobile but on desktop, it should be 18px and on mobile, it should be 14px.

    Roel John
    Rank Math business

    Hello,

    Thank you for contacting Rank Math again.

    The code above that my colleague share is the right code for mobile devices unless there are other CSS codes interfering with the CSS we gave.

    Is it possible for you can share the login information so we can check your site?

    Thank you, and looking forward to your update.

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

    Hello,

    Thank you for keeping in touch with us.

    I followed your website’s maximum width of the mobile menu navigation which ends around 768px. Please try this CSS code but do make sure to remove your existing custom CSS which has this font-size: 18px !important;.

    @media only screen and (min-width: 769px){
        .rank-math-breadcrumb{
            font-size: 18px;
        }
    }
    @media only screen and (max-width: 768px){
        .rank-math-breadcrumb{
            font-size: 14px;
        }
    }

    We are looking forward to helping you. Thank you.

    Thanks, it worked!!!

    Anas
    Rank Math business

    Hello,

    We are super happy that your issue is resolved. If you have any other questions in the future, know that we are here to help you.

    If you don’t mind me asking, could you please leave us a review (if you haven’t already) on https://wordpress.org/support/plugin/seo-by-rank-math/reviews/#new-post about your overall experience with Rank Math? We appreciate your time and patience.

    If you do have another question in the future, please feel free to create a new forum topic, and it will be our pleasure to assist you again.

    Thank you.

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

The ticket ‘RankMath’s breadcrumbs font’ is closed to new replies.