Всплывающая контактная форма на моем веб-сайте немного не центрируется при просмотре на мобильных телефонах
Мой сайт www.myfixerhouse.com
Если вы нажмете на любую из ссылок на веб-странице, появится контактная форма. Однако, когда форма просматривается на мобильном телефоне или на маленьком экране, что-то мешает центрированию. Форма обратной связи
Сайт сделан с использованием WordPress, а контактная форма — с помощью плагина Gravity Forms. Я хотел бы знать, как я могу сделать контактную форму для центрирования на мобильном телефоне.
Решение
проблема в .modal-dialog имеет установленный запас в 10 пикселей
в Chrome, если щелкнуть правой кнопкой мыши контактную форму (например, поля ввода) и перейти к проверке, а затем навести курсор мыши на родительский элемент <div class="modal-dialog" role="document"> вы увидите, что Chrome показывает нам, что вокруг этого div есть поле, в котором находится ваша контактная форма. Это проталкивает вашу контактную форму.
если вы поиграете с шириной окна, вы увидите, как на экране размером более 450 пикселей справа появляется небольшой промежуток.
если мы удалим поле из CSS-класса, мы получим плоть контактной формы у края окна.
но если вы хотите иметь этот пробел, я бы предложил изменить margin в padding
Другие решения
Я посетил ваш сайт и поиграл со стилем, используя консоль разработчика Chrome. Я обнаружил, что div «modal-dialog», инкапсулирующий форму, имеет отступ в 10px с левой и правой сторон, что заставляет форму перемещаться на 10px вправо на меньших экранах.
Просто установить margin: 0px на modal-dialog элемент, и вы должны быть в порядке! Вот как это должно выглядеть, когда вы закончите.
Вам может понадобиться установить плагин, такой как этот: https://wordpress.org/plugins/simple-custom-css/ чтобы стилизовать плагин, так как у вас нет прямого доступа. Как только вы это сделали, просто добавьте
.modal-dialog {
margin: 0px;
}
на ваш CSS. Если он не слушает ваши изменения, добавьте !important флаг собственности.