На нашем сайте мы используем cookie для сбора информации технического характера и обрабатываем IP-адрес вашего местоположения. Продолжая использовать этот сайт, вы даете согласие на использование файлов cookies. Здесь вы можете узнать, как мы пользуемся файлами cookies.
Я согласен
логотип upread.ru

Пошаговое руководство по верстке на вордпресс. Глава пятая: обратная связь и адаптация гугл карт


В этой главе мы научимся ставить обратную связь, а также делать блок гугл карт адаптивным на WP.

Пожалуй, пора сделать хотя бы одну законченную страницу. Пусть это будет страница «Контакты». Что у нас на этой странице? Сначала идут гугл карты, а слева координаты компании, а справа – форма обратной связи.

Самый простой способ реализовать такую верстку – вставить сверху iframe с гугл картами, а снизу – табличку с двумя ячейками: слева координаты, справа – форма обратной связи. Но, сейчас не особо приветствуется табличная верстка, так что мы вставим iframe, в вот два дива разместим рядышком. Левому зададим свойства float:left и width: 30%;, а правому – text-align:right – чтобы прижалось содержимое к правому краю, да и сам блок влез.

Вот что получаем:



Да, кстати, для формы обратной связи устанавливаем плагин Contact Form 7. Не буду расписыать подробно – там все понятно Сразу же настраиваем рекапчу - буквально в два клика, просто получаем два ключа и все.

Интересный момент. Для того, чтобы прижать рекапчу к правому краю, мало вот этого правила:

#contact_form {
    text-align: right;
}
необходимо изменить ширину блока на авто:

.g-recaptcha > div{
width:auto!important;
}
Сразу же подумаем и об адаптивности. Добавим правило, если ширина экрана будет меньше 1180:

@media only screen and (max-width: 1180px) {
#kont {
width: 100%!important;
}
#contact_form {
text-align: left!important;
width: 100%!important;
}
}
То есть располагаем один блок под другим.

Встроенные гугл карты и адаптивность

По умолчанию в настройке iframe гугл карт стоят ширина и высота. Чтобы сделать данный блок адаптивным, просто уберите ширину, вместо неё задайте максимальную:

style="max-width:1170px;"
А с помощью jquery подстроим после загрузки страницы ширину гугл карт на ширину экрана:

<script>
window.onload = function()
{
w = document.body.clientWidth;
jQuery('#map-resp > iframe').css('width', w);
}
</script>
Обратите внимание, что имеющиеся решения в сети неполные. Там просто обрезаются карты, то есть точка остается справа, а мы получаем с искомыми координатами в центре.






тегизаметки, верстка, wordpress, гугл карты





Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Имя файла в openFileDialog в C++
Экзамен по PHP в ИНТУИТ


© upread.ru 2013-2019
При перепечатке активная ссылка на сайт обязательна.
Задать вопрос
письмо
Здравствуйте! Вы можете задать мне любой вопрос. Если не получается отправить сообщение через эту форму, то пишите на почу up777up@yandex.ru
Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.