彈出的聯繫表格上我的網站

Question

我的網站是www.myfixerhouse.com 如果你點擊一個接觸的形式彈出網頁上的鏈接中的任何一個。但是，當在手機或小屏幕上查看錶格時，有些東西阻止了它的居中。 Contact form

該網站是由與WordPress和接觸形式與插件重力形式作出。我想知道如何讓聯繫表單以手機爲中心。

Answer 1

我訪問過您的網站，並使用Chrome開發者控制檯嘗試了造型。我發現封裝窗體的「模式對話框」div在左右兩邊有一個10像素的邊距，這導致窗體在較小的屏幕上被向右推動10px。

只需將modal-dialog元素上設置margin: 0px，你應該是好去！ Here's完成後它應該是什麼樣子。

您可能需要安裝一個插件像這樣：https://wordpress.org/plugins/simple-custom-css/爲了樣式插件，因爲你不必直接訪問。完成後，只需將

.modal-dialog { 
    margin: 0px; 
} 

添加到您的CSS中。如果它不聽您的更改，請將!important標誌添加到屬性中。

Answer 2

問題是.modal-dialog有10px的

在Chrome瀏覽器中設置的空白，如果你正確的您的聯繫方式上單擊（如輸入框），去檢查，然後懸停在您的鼠標到父母<div class="modal-dialog" role="document">您會看到Chrome向我們展示了您的聯繫表單所在的此div的空白。

，如果你與窗口寬度玩你會看到那裏的時候，屏幕超過450像素如何在出現右側的微小差距。

如果我們從CSS類去除餘量我們havew靠在窗口的邊緣處的接觸形式的肉。

，但如果你想有差距，我建議改變margin到padding