Вы можете сделать немного более сложную структуру стилей, которая позволит в мобильной версии ХК разместить в ряд , с возможностью их скрола пальцем вправо-влево.
Например так :
/*breadcrumb*/
@media (max-width: 768px) {
.breadcrumb {
display: flex;
overflow-x: auto;
margin: 0 0 20px 0;
padding: 0;
border: 1px solid #e4f1fc;
background-color: #f2f8fd;
}
.breadcrumb i {
font-size: 15px;
}
.breadcrumb li {
word-break: break-all !important;
white-space: normal!important;
}
.breadcrumb > li {
text-shadow: 0 1px 0 #FFF;
padding: 0 20px;
position: relative;
white-space: nowrap;
line-height: 37px;
flex-shrink: 0;
}
.breadcrumb > li + li:before {
content: '';
padding: 0;
}
.breadcrumb > li:after {
content: '';
display: block;
position: absolute;
top: 5px;
right: 0;
width: 26px;
height: 26px;
border-right: 1px solid #DDD;
border-bottom: 1px solid #DDD;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
Вставьте в самый конец вашего файла стилей, сохраните и нажмите несколько раз комбинацию ctrl+F5 на клавиатуре (сброс кеша браузера).
Ну и за одно уменьшить шрифт H1 (название товара) в мобильной версии
@media (max-width: 768px) {
#product-product h1 {
font-size: 1.3em;
line-height: 1.5em;
font-weight:500;
}
}
Ну и вот так для шапки (выставить в один ряд лого и телефон )
@media (max-width: 767px) {
.container .col-sm-12.col-md-6.col-lg-5 {
display: flex;
align-items: center;
}
#logo img {
width: 100%;
}
#contact {
font-size: 14px;
margin-left: auto;
margin-top: -10px;
}
#contact a {
text-decoration: none;
color: #333;
}
#contact i {
margin-right: 5px;
}
}