Всплывающая контактная форма на моем веб-сайте слегка не центрирована при просмотре на мобильных телефонах

Question

Мой сайт www.myfixerhouse.com Если вы нажмете на любую из ссылок на веб-странице, появится контактная форма. Однако, когда форма просматривается на мобильном телефоне или на меньшем экране, что-то мешает ему центрировать. Contact form

Веб-сайт создан с помощью Wordpress, а контактная форма - с плагинами Gravity Forms. Я хотел бы знать, как я могу настроить контактную форму на мобильном телефоне.

Answer 1

Я посетил ваш сайт и играл с помощью стиля с помощью консоли разработчика Chrome. Я обнаружил, что «модальный диалог» div, инкапсулирующий форму, имеет край 10px на левой и правой сторонах, которые заставляют форму сдвигать 10px вправо на меньших экранах.

Просто установите margin: 0px на элемент modal-dialog, и вы должны быть хорошими! Here's, как он будет выглядеть, когда вы закончите.

Возможно, вам потребуется установить такой плагин: https://wordpress.org/plugins/simple-custom-css/, чтобы создать плагин, так как у вас нет прямого доступа. Как только вы это сделаете, просто добавьте

.modal-dialog { 
    margin: 0px; 
} 

в ваш CSS. Если он не прослушает ваши изменения, добавьте флаг !important к объекту.

Answer 2

проблема .modal-dialog имеет множество запас 10px

в Chrome, если вы щелкните правой кнопкой мыши на контактную форму (например, полей ввода) и перейти на проверку затем наведите вас мышь вверх к parent <div class="modal-dialog" role="document"> вы увидите, что Chrome показывает нам, что у этого div есть маржа, в которой находится ваша контактная форма. Это приводит вашу форму контакта.

Если вы играете с шириной окна, вы увидите, как при увеличении экрана более 450 пикселей появляется крошечный пробел справа.

Если мы удалим маржу из класса CSS, у нас есть контактная форма плоти по краю окна.

, но если вы хотите, чтобы этот пробел я хотел бы предложить изменения margin к padding