Je souhaite créer le formulaire de contact (il se trouve dans cette page de mon site Web : https://nadiasabridietista.it/contatti / ) responsive, par exemple pour les smartphones. j'ai essayé avec :

@media screen and (max-width: 600px) {
#form_contatto{
    height: 710px;
    border-spacing: 3px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    border-radius: 10px;
}

#cont_1 {
    border-spacing: 1px;
}

#cont_2 {
    border-spacing: 0px;
    position: relative;
    bottom: 15px;
}

.sticky {
    position: fixed;
    top: 0;
}

}
}

Mais cela ne fonctionne pas (à partir du smartphone, le formulaire a les mêmes tailles que la version de bureau).

-3
Mario 5 sept. 2020 à 17:09

1 réponse

Meilleure réponse

Vous avez besoin de quelques changements à différents endroits :

  1. #form_contatto

    • Supprimer le margin-left
    • Faire le width: 100%;
  2. form

    • supprimer le max-width: 400px;

Il peut avoir besoin de plus de marges et de rembourrages pour une meilleure apparence, mais ce sont les étapes de base pour le rendre réactif.

Comme @AStopher l'a mentionné, vous pouvez consulter le Bootstrap Grid system pour faciliter le travail de réactivité

enter image description here

0
yazantahhan 5 sept. 2020 à 14:32