2015-07-19 2 views
0

Я использую контактную форму для Drupal с двумя блоками, слева для Карт Google, а справа - форма.CSS/Drupal - Контактная форма сворачивается сама по себе

Это прекрасно работает, когда отображается полный экран, однако при уменьшении окна браузера для реагирования поле формы справа сворачивается в блоке карт Google.

Полный экран отлично

enter image description here

Сворачивания на себя с шириной браузера уменьшенного enter image description here

Я попытался с помощью max-width: 100%, но это не оказывает какой-либо эффект.

Как изменить CSS так, чтобы код формы уходил в нижнюю часть блока Google Maps вместо того, чтобы складываться друг на друга?

CSS код

Google Maps

.page-contact .block-google-maps { 
margin-right: 2%; 
min-height: 500px; 
float:left; 
max-width: 100%; 
padding-bottom: 20px; 

Код формы

position: absolute; 
right: 100px; 
top: 110px; 
width: 40%; 
+0

Причина, по которой контактная форма перекрывает карту, состоит в том, что вы «позиция: абсолютная» в форме. Поэтому он всегда будет отображаться справа от страницы. Вы должны использовать точки прерывания CSS для перемещения каждого блока на более мелкие экраны. – stevenw00

ответ

1

Этот CSS является выглядит жестко, для совершенных правил использования отзывчивость @media в CSS для различной размеры экрана. Еще одно предложение: на маленьких экранах удерживайте два элемента (карта Google и контактную форму) вертикально, а не горизонтально.

Смежные вопросы