CSS/Drupal - 联系表单本身崩溃
问题描述:
我使用Drupal的联系表单与2个块,左侧是谷歌地图,右侧是表单。CSS/Drupal - 联系表单本身崩溃
当它是全屏时,它可以正常工作,但是当为了响应而减少浏览器窗口时,右侧的表单域会在Google地图块上崩溃。
全画面精美
崩于本身带有浏览器的宽度减少
我一直在使用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%;
答
这个CSS是貌似硬编码,在CSS完美响应使用@media规则不同屏幕尺寸。 还有一个建议是:在小屏幕中保持两个项目(谷歌地图和联系表格)垂直而不是水平。
联系表格与地图重叠的原因是因为您是位置:绝对是表格。所以它会一直显示在页面的右侧。您必须使用CSS断点在较小的屏幕上移动每个块。 – stevenw00