Dans mon projet Django, je dois rendre mon site pleinement responsive. Jusqu'à présent, je fais cela en ajoutant ce morceau de code pour mon arrière-plan:

CSS:

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

J'ai alors un formulaire. Je génère ce formulaire en utilisant Django. Voici mon code de formulaire en html:

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

                {% endfor %}

CSS:

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

Lorsque je redimensionne ma page, le formulaire reste statique et ne bouge pas. Ce que je veux, c'est que lorsque je raccourcis ma page en résolution, je veux que le formulaire couvre la page afin qu'elle puisse ensuite être réellement vue par l'utilisateur. Des idées sur la façon d'accomplir cela? Je vous remercie.

0
eweee 8 nov. 2019 à 03:03

1 réponse

Meilleure réponse

Cherchez-vous quelque chose comme ça?

Vous pouvez ajuster la gauche et le haut à tout ce que vous aimez.

.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>
1
Evik Ghazarian 8 nov. 2019 à 00:21