如何使此联系​​表做出响应？

Question

我想让联系表（在我网站的这个页面上：https://nadiasabridietista.it/contatti/）响应，例如智能手机。我试过了：

@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;
}

}

}

但它不起作用（在智能手机上，表单的大小与桌面版本相同）。

Answer 1

您需要在不同的地方进行一些更改：

1. #form_contatto

   • 删除margin-left
   • 制作width: 100%;

2. form

   • 删除max-width: 400px;

它可能需要更多边距和内边距才能更好看，但这是让它响应的基本步骤。

正如@AStopher 提到的，您可以检查Bootstrap Grid system 以使响应更轻松