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

Question

我使用Drupal的联系表格有2个区块，左边是Google地图，右边是表格。

在全屏显示时效果很好，但是当缩小浏览器窗口以获得响应时，右侧的表单字段会在Google地图块上折叠。

全屏很好

在浏览器宽度减少的情况下自行折叠

我已尝试使用max-width: 100%但它似乎没有任何效果。

如何更改CSS，以便将表单代码放到Google Maps块的底部而不是堆叠在彼此之上？

CSS

Google地图代码

.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%;

Answer 1

这个CSS看起来像硬编码，因为完美的响应性使用CSS中的@media规则来处理不同的屏幕尺寸。 还有一个建议是：在小屏幕中，保持两个项目（谷歌地图和联系表格）垂直而不是水平。