如何响应此联系表？

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 以简化响应工作