Breadcrumbs On Mobile – Title Overlapping

I used the CSS below and it worked well, however if the title of the page (usually a product page) is longer it wraps to a second line and overlaps with the breadcrumbs making it unreadable (see attachment). Is there anything I can do to space them out so they don’t overlap?

@media handheld, only screen and (max-width: 767px){
.breadcrumbs-wrapper {
display: block !important;
}
}