在手机上查看时，我的网站上弹出的联系表略微不居中

Posted 2023-03-29

【中文标题】在手机上查看时，我的网站上弹出的联系表略微不居中

【英文标题】：The pop-up contact form on my website is slightly not centered when viewed on mobile phones

【发布时间】：2017-02-21 21:04:58

【问题描述】：

我的网站是 www.myfixerhouse.com 如果您单击网页上的任何一个链接，就会弹出一个联系表。但是，当在手机或较小的屏幕上查看表单时，有些东西会阻止它居中。 Contact form

网站是用 Wordpress 制作的，联系表格是用插件 Gravity Forms 制作的。我想知道如何使联系表以手机为中心。

【问题讨论】：

你试过什么？您需要编辑 CSS 文件。你知道怎么做吗？

查看我的回答，如果您有任何问题，请告诉我。应该为您解决问题！

【参考方案1】：

问题是.modal-dialog 设置了 10px 的边距

在 Chrome 中，如果您右键单击您的联系表单（如输入框）并转到 Inspect，然后将鼠标悬停在父级 <div class="modal-dialog" role="document"> 上，您会看到 Chrome 向我们显示此 div 周围有一个边距您的联系表格在里面。这会推动您的联系表格。

如果您使用窗口宽度，您会看到当屏幕超过 450 像素时，右侧会出现一个微小的间隙。

如果我们从 CSS 类中删除边距，我们就会在窗口边缘形成联系表单。

但如果你想有这个差距，我建议将 margin 更改为 padding

【讨论】：

谢谢！这确实有帮助！

【参考方案2】：

我访问过您的网站并使用 Chrome 开发者控制台玩弄了样式。我发现封装表单的“modal-dialog”div 在左右两侧有 10px 的边距，导致表单在较小的屏幕上向右推 10px。

只需在modal-dialog 元素上设置margin: 0px，您就可以开始了！ Here's 完成后的样子。

您可能需要安装这样的插件：https://wordpress.org/plugins/simple-custom-css/ 才能设置插件的样式，因为您没有直接访问权限。完成后，只需添加

.modal-dialog 
    margin: 0px;

到您的 CSS。如果它不听您的更改，请将 !important 标志添加到属性中。