2015-07-19 65 views
0

我使用Drupal的聯繫表單與2個塊,左側是谷歌地圖,右側是表單。CSS/Drupal - 聯繫表單本身崩潰

當它是全屏時,它可以正常工作,但是當爲了響應而減少瀏覽器窗口時,右側的表單域會在Google地圖塊上崩潰。

全畫面精美

enter image description here

崩於本身帶有瀏覽器的寬度減少 enter image description here

我一直在使用max-width: 100%嘗試,但它似乎沒有任何效果。

如何更改CSS以便表單代碼位於Google地圖塊的底部而不是堆疊在彼此之上?

CSS

谷歌地圖代碼

.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是貌似硬編碼,在CSS完美響應使用@media規則不同屏幕尺寸。 還有一個建議是:在小屏幕中保持兩個項目(谷歌地圖和聯繫表格)垂直而不是水平。