Здравствуйте! Не могу разобраться с уменьшением блока на мобильных устройствах. Установил модуль Акции и подарки, но на телефонах блок с таймером вылазит за рамки, пробовал много вариантов, но не получается. Помогите решить этот вопрос.
Вот сам блок:
.product-promotion {
border: 2px solid #d9535b;
display: inline-block;
margin-bottom: 0px;
width: 460px;
padding: 5px; position: relative;
-moz-border-radius: 0 14px 14px 14px;
-webkit-border-radius: 0 14px 14px 14px;
border-radius: 0 14px 14px 14px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 5px 5px 8px 0 rgba(2,2,3,.2);
-webkit-box-shadow: 5px 5px 8px 0 rgba(2,2,3,.2);
box-shadow: 5px 5px 8px 0 rgba(2,2,3,.2);
}
Если ставлю width: auto, то не сильно вылазит за границу, но на Pc он начинает зависить от длины названия, что не есть удобно.
И второй вопрос. Во всплывающем окне на мобильных текст уходит за рамки, как его подправить?
.popup-description {
margin-bottom: 10px;
}
.popup-image + .popup-description {
float: left;
width: 350px;
line-height: 0.9em;
}