Breadcrumb Title Bar Extending too Far on Mobile?

Darter02

If there's already a thread about this, sorry for the duplicate.

I'm playing around with some pages, and as I checked how things looked on mobile I noticed that breadcrumb titles jutted way off the screen. I looked at all my pages online, and they all have this issue.

denisegoldberg

Oh, interesting... I see the same thing on my site - and it looks bad!

It seems to me that the breadcrumb should automatically adjust, maybe to multiple lines.
I wonder if there is a way to specify a different breadcrumb display for small screens.

--- Denise

denisegoldberg

I believe this is a bug, moving to the bug reporting forum.

--- Denise

leftquark

Confirmed that it doesn't behave as it should on mobile devices.

It can be fixed using:

You may also be better off making the breadcrumb text smaller for mobile devices:

@media screen and (max-width: 670px) {
  /* Wrap long breadcrumb titles */
  .sm-breadcrumb {
    white-space: normal !important;
  }

  /* Make the breadcrumb font smaller for mobile devices that don't have long screen widths */
  .sm-breadcrumb-item h1 {
    font-size: 24px !important;
  }
}

denisegoldberg

leftquark wrote: »

It can be fixed using:
...
You may also be better off making the breadcrumb text smaller for mobile devices:

I've added the CSS to my site and it looks much better, greatly appreciated.
Thanks!

--- Denise