Адаптация таймера eTimer, как реализовать?

Question

[Антон Вебсайтовский]

Здравствуйте, кто может делал или знает как можно сделать адаптивным этот таймер eTimer от сервиса.
Сервис __https://e-timer.ru/



Скрипты таймера:

<script src="https://e-timer.ru/js/etimer.js"></script>
  <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery(".eTimer").eTimer({
        etType: 0, etDate: "22.07.2019.0.0", etBackground: "#efefef", etBorderSize: 0, etBorderRadius: 2, etBorderColor: "white", etShadow: "inset 0px 0px 0px 0px #333333", etLastUnit: 4, etNumberFontFamily: "Impact", etNumberSize: 60, etNumberColor: "white", etNumberPaddingTB: 0, etNumberPaddingLR: 15, etNumberBackground: "#f48951", etNumberBorderSize: 0, etNumberBorderRadius: 3, etNumberBorderColor: "white", etNumberShadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.5)"
      });
    });
  </script>

Вот эта строка отвечает за размер таймера, etNumberSize: 60, я хочу реализовать чтобы часы были адаптивными реально ли? ну или хотя бы сделать их меньше при определенном размере экрана.

Рабочий пример тут:
https://jsfiddle.net/kq6u4fLt/4/

Answer 1

[Дмитрий]

Можно сделать. Опишите свои стили для элементов таймера в отдельном media запросе для необходимых для вас ширин экрана.
Возможно придётся писать все стили с помощью !important
вам нужно как минимум менять padding и размер шрифта
1. открываете консоль веб-разработчика в вашем браузере.
2. Выбираете таймер.
3. Смотрите какие классы для каких элементов используются
4. Применяйте свои стили
.....
Profit!

Comments

[Антон Вебсайтовский]

Да, это понятно, вот только не работает это.

.eTimer .etUnit .etNumber {
  font-size: 40px;
  }
  .etSign {
    font-size: 16px;
  }

[Beeetle]

Антон Вебсайтовский, добавьте !important

[Антон Вебсайтовский]

Не совсем конечно адаптивным вышло, если сжимать экран, то видно числа меньше становятся и как бы квадратные, а не вытянутые, а если обновить то оно норма. Непонятно )

[Антон Вебсайтовский]

Beeetle, а куда именно и как добавить?

[Beeetle]

.eTimer .etUnit .etNumber {
font-size: 40px!important;
}
.etSign {
font-size: 16px!important;
}

[Антон Вебсайтовский]

Beeetle, а что оно дает, разницы вообще не вижу.

Вообще щас проблема вот такая.

Вот что получилось.

Обычный вид


При сжатом экране, через css медия, задаем шрифт циферок меньше. (уже видно что не вытянутые блоки у циферок)


Если нажать f5, при сжатом экране браузера, то вид становиться нормальный. (блоки вытянутые)

Answer 2

[Антон Вебсайтовский]

Как я сделал адаптацию, скачал к себе

<script src="https://e-timer.ru/js/etimer.js"></script>

Открыл:
etimer.js

Там удалил кусок кода:


Далее задал размеры шрифта через css ну и медия.

.eTimer, .etUnit, .etNumber, .etSep {
  font-size: 60px;
}
.etSign {
  font-size: 18px;
}
@media only screen and (max-width:860px) {
  .eTimer, .etUnit, .etNumber, .etSep {
  font-size: 40px;
  }
  .etSign {
    font-size: 16px;
  }
}

Comments

[Антон Вебсайтовский]

Не совсем конечно адаптивным вышло, если сжимать экран, то видно числа меньше становятся и как бы квадратные, а не вытянутые, а если обновить то оно норма. Непонятно )

[Антон Вебсайтовский]

Вот что получилось.

Обычный вид


При сжатом экране, через css медия, задаем шрифт циферок меньше. (уже видно что не вытянутые блоки у циферок)


Если нажать f5, при сжатом экране браузера, то вид становиться нормальный. (блоки вытянутые)

Answer 3

[Евгений Сидоров]

Всем привет
Может остался у кого то данный скрипт?