Yoast Breadcrumbs - smaller font

Hi there,

how are you adding the Breadcrumbs ?

I used a hook in elements using "wpseo_breadcrumb" and selected to 'generate_before_entry_title'

They're loading fine but I'd like them to appear really small on the posts.

Let me know the best way to reduce the size. Thanks!

Wrap your code inside some HTML like so:

<span id="breadcrumbs">your code here</span>

Then your CSS should work.

Thank you - that worked great!

Glad to hear that!

Hi there,

Sorry, I have one more question! I just noticed on mobile the breadcrumbs sometimes go across two lines, with a large line height in between.

This is the css I currently have:

#breadcrumbs {
font-size: 12px;
padding-bottom: 3px;
}

What would reduce the line height I'm seeing on mobile?

Thanks!

Making that type smaller for mobile is probably going to make it unreadable.... but you can try:

@media(max-width: 768px) {
  #breadcrumbs {
    font-size: 8px;
  }
}

or you could instead just remove the last crumb on mobile:

@media(max-width: 768px) {
  .breadcrumb_last {
    display: none;
  }
}