Ch0oJoy

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

Рекомендуемые сообщения

Ch0oJoy    8

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

Вот сам блок:

.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    139

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу