HTML - Создание формы, реагирующей на изменение размера страницы

Question

В моем проекте Django я должен сделать свой сайт полностью адаптивным. Пока что я делаю это, добавляя этот фрагмент кода для моего фона:

CSS:

 div {
            background-image: url("{% static 'spotifywallpaper.jpg' %}");
            background-size: cover;
            width: 100%;
            height: 100%;
 }

У меня есть форма. Я генерирую эту форму, используя Django. Вот мой код формы в html:

{% for field in form %}
                    {{ field }}
                    <br>

                {% endfor %}

CSS:

.signupform {
                position: absolute;
                background-size: cover;
                left: 600px;
                top:150px;
            }

Когда я изменяю размер моей страницы, форма остается статичной и не перемещается. Я хочу, чтобы, когда я укорачивал свою страницу в разрешении, я хотел, чтобы форма покрывала страницу, чтобы пользователь мог ее увидеть. Есть идеи, как этого добиться? Спасибо.

Answer 1

Вы ищете что-то подобное?

Вы можете отрегулировать левую и верхнюю части по своему вкусу.

.form-container {
position: absolute;
background-size: cover;
left: 200px;
top:150px;
width: 300px;
}
input {
width: 100%;
}
@media only screen and (max-width: 600px) {
  .form-container {
    left: 0;
    top:100px;
  }
}

<div class="form-container">
<input type="text" placeholder="name"/>
<input type="text" placeholder="phone"/>
<input type="text" placeholder="address"/>
</div>