Как сделать поле формы отзывчивым?

Question

Я только начал изучать джанго несколько недель. Чтобы учиться более эффективно, я начал создавать сайт отеля и развернул его с помощью heroku. Сайт выглядит лучше на моем ноутбуке, но выглядит хуже на моем iPad или мобильном телефоне. Я хотел сделать поля формы отзывчивыми, используя хрустящую форму css или django. Я нашел много ответов, но ни один из них не помог мне понять, как это сделать. Кроме того, любые дополнительные рекомендации для веб-сайта были бы рекомендованы мне как новичку в веб-разработке. Вот сайт: https://hotel -jumera.herokuapp.com (Это моя практика для создания веб-сайта, так что извините за случай авторских прав) поле формы в шаблоне:

<form  method='post'>
    {% csrf_token %}
    {{booking_form.as_p }}
    <button type="submit" class="btn btn-success"> Send </button>
</form>

Answer 1

То, что вы хотите сделать, это установить некоторые точки останова в вашем CSS, где вы можете изменить ширину элементов на вашем сайте

@media only screen and (min-width: 400px) {
  .col-2 {
      background-color: red;
  }
}

Если окно браузера имеет размер 600px или больше, цвет фона будет красным. Это мобильный первый подход. Вы создаете свой сайт для мобильных устройств, а затем добавляете точки останова для обслуживания больших экранов tablet min-width: 600px и desktop min-width: 1200px