CSS/Drupal - 联系表单本身崩溃

问题描述:

我使用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

这个CSS是貌似硬编码,在CSS完美响应使用@media规则不同屏幕尺寸。 还有一个建议是:在小屏幕中保持两个项目(谷歌地图和联系表格)垂直而不是水平。