Breadcrumbs Displaying Incorrectly For Long Titles

General General Questions
1

Hi,

Is there a way to have the breadcrumb evenly displayed on the next line? For some reason a portion of the breadcrumb is overlapping a part of the breadcrumb instead of moving down a bit, i have included a screenshot of what problem i'm facing?

It's displaying correctly on computers but when displayed on smaller computer screens or tablets or iPads it seems to not show correctly?

Just an FYI I don't use the mobile CS-Cart edition on the tables and iPads but only on the smartphones.

Please help!

Breadcrumb Problem Screenshot.jpg

2

It seems like a custom theme style problem.

3

Is there a workaround to get that fixed as I did add the style myself?

Any help is fully appreciated it!

Is there something I can add to the stylesheet to make it show correctly, here is what i have for the border styles

/* Breadcrumbs */

.ty-breadcrumbs {
padding-top: 10px;
padding-bottom: 15px;
}
.ty-breadcrumbs__current {
border-top: 1px solid #4E4A4A;
border-right: 1px solid #4E4A4A;
border-left: 1px solid #4E4A4A;
border-bottom: 1px solid #4E4A4A;
border-color: #4a4a4a;
background: #e9e9e9;
padding: 5px 5px;
}
.ty-breadcrumbs__a span {
border-top: 1px solid #4E4A4A;
border-left: 1px dashed #4E4A4A;
border-bottom: 1px solid #4E4A4A;
border-color: #4a4a4a;
padding: 5px 5px;
color: #4a4a4a;
}

Thanks.