Question

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

该网站使用Wordpress制作，联系表格使用插件Gravity Forms制作。我想知道如何使联系表格以移动电话为中心。

Answer 1

问题是.modal-dialog的设定边距为10px

如果你右键点击你的联系表格（如输入框），然后转到Inspect，然后将鼠标悬停在父<div class="modal-dialog" role="document">上，你会看到Chrome显示我们周围有一个边距，在Chrome中

您的联系表单所在的div。这将推送您的联系表单。

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

如果我们从CSS类中删除边距，我们就会在页面边缘处显示联系人形式。

但是如果您想要有这个差距我会建议将margin更改为padding

Answer 2

我访问了您的网站，并使用Chrome开发者控制台玩弄了样式。我找到了＆＃34;模态对话框＆＃34;封装表单的div在左侧和右侧有10px的边距，这使得表单在较小的屏幕上向右推10px。

只需在margin: 0px元素上设置modal-dialog就可以了！ Here's当你完成时应该是什么样子。

您可能需要安装一个插件，例如：https://wordpress.org/plugins/simple-custom-css/，以便设置插件的样式，因为您无法直接访问。完成后，只需添加

即可

.modal-dialog {
    margin: 0px;
}

到你的CSS。如果它没有收听您的更改，请将!important标记添加到该媒体资源中。