Как сделать этот плагин календаря отзывчивым

Вы можете посмотреть тестовую версию моего календаря здесь . Обратите внимание, как это не реагирует. Обратите внимание, как он должен реагировать при уменьшении или увеличении ширины браузера, если вы посмотрите на пример на странице производителя здесь .

Мой код:

  <!-- Section: Calendar -->
  <section>
    <div class="row">
      <div class="col-md-12 mx-auto">
        <div id="calendar"></div>
      </div>
    </div>
  </section>

И пример кода сайта:

<div class="row">
  <div class="col-md-12">
    <div id="calendar-1"></div>
  </div>
</div>

Очевидно, мой календарь не становится меньше, когда я уменьшаю ширину моего браузера, но пример делает! Почему?

Всего 1 ответ


У вас есть фиксированная ширина в room_detail.css 800px в строке 13 - она ​​должна быть в процентах или иметь медиа-запросы с указанием подходящей ширины.

section {
  height: 70%;
  position: fixed;
  width: 800px; /* This is what's causing the problem */
}

Удалите его или измените на процент, и он должен работать - вам может потребоваться применить медиа-запросы, чтобы он вел себя так, как вам бы хотелось.