XF 2.1 Breadcrumbs on mobile are truncated.

[BIG LLC]

Desktop:



Mobile:



How do I get the full breadcrumbs to display on mobile/responsive? I've searched the options but cannot find a setting.

Given the way people use mobile, these truncated breadcrumbs aren't optimal.

 

[briansol]

app_breadcrumbs.less

@media (max-width: @xf-responsiveNarrow)
{
	.p-breadcrumbs
	{
		> li
		{
			display: none;
			font-size: @xf-fontSizeSmallest;

			&:last-child
			{
				display: block;
			}

the display none hides everything, and then the last-child puts the final item back into view which is what you see.

you'll need to tweak that somehow to display what you want.

 

[BIG LLC]

app_breadcrumbs.less

@media (max-width: @xf-responsiveNarrow)
{
    .p-breadcrumbs
    {
        > li
        {
            display: none;
            font-size: @xf-fontSizeSmallest;

            &:last-child
            {
                display: block;
            }

the display none hides everything, and then the last-child puts the final item back into view which is what you see.

you'll need to tweak that somehow to display what you want.

OK I don't really know what to do but I suppose I will experiment.

 

[BIG LLC]

app_breadcrumbs.less

@media (max-width: @xf-responsiveNarrow)
{
    .p-breadcrumbs
    {
        > li
        {
            display: none;
            font-size: @xf-fontSizeSmallest;

            &:last-child
            {
                display: block;
            }

the display none hides everything, and then the last-child puts the final item back into view which is what you see.

you'll need to tweak that somehow to display what you want.

Just had to take the NONE out.

//display: none;