Помогите советом по адаптации части модуля

[Ch0oJoy]

Здравствуйте! Не могу разобраться с уменьшением блока на мобильных устройствах. Установил модуль Акции и подарки, но на телефонах блок с таймером вылазит за рамки, пробовал много вариантов, но не получается. Помогите решить этот вопрос.

Вот сам блок:

.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;
}

[SiteMix]

Используй медиа-запросы для разных разрешений:

@media (max-width: 760px) {...}

@media (min-width: 768px) {...}

@media (min-width: 768px) {...}, @media (max-width: 991px) {...}

 

Например, под твоим первым блоком вставь @media (max-width: 760px) {.product-promotion {width: 360px;}}

а под вторым

@media (max-width: 760px) {.popup-description {width: 240px;}}

 

Цифры подставь свои.