Question

希望增加Divi中谷歌地图模块的高度，但我的CSS代码不起作用，不明白为什么。我在Advanced＆gt;中粘贴以下代码自定义CSS＆gt;地图模块的主要元素

.et_pb_map {
     height: 440px;
}

任何建议都非常有用！

Answer 1

Divi主题的绝对地图

在行设置/自定义CSS /列＆＃34; 1＆＃34;中添加以下CSS主要元素（列号是您放置地图的位置）：

    position:relative;

将类添加到地图模块。在此示例中，CSS类是absolute_map 在自定义CSS框中添加以下CSS：

.absolute_map .et_pb_map {
    position: absolute;
    overflow:visible;
    height: 100%; 
}

快乐！

Answer 2

尝试添加padding，而不是明确增加height。

#map ,#map .et_pb_map {padding-bottom: 56.25%}

您可能需要调整选择器。通常#map就足够了。

并调整填充百分比以修改宽高比。这是响应。

这可能起作用的原因是因为填充为背景创建了更多空间 - 在此iframe的情况下映射 - 要绘制从而扩展它。 Read more on this here

Working demo on JSFiddle

Answer 3

如果您通过Divi Builder的该部分（高级＆gt;自定义CSS＆gt;主要元素）进行自定义，只需添加属性声明而不是整个CSS规则。

 height: 440px;

Answer 4

无需在高级＆gt;中添加css类自定义css。只需添加属性值440px。

Answer 5

使用！重要的是隔夜css

.et_pb_map {
     height: 440px !important;
}

Answer 6

添加！重要的是你的css

.et_pb_map {
     height: 440px !important;
}

Answer 7

使用以下代码。

请在此js文件中使用您的Google API密钥。

如果您想增加/减少地图的高度，请在 #div_gmap 中进行更改。

＆＃13;

      #div_gmap {
        height: 440px;
      }

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>
<div id="div_gmap"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('div_gmap'), {
          center: {lat: 22.3039, lng: 70.8022},
          zoom: 12
        });
      }
    </script>

＆＃13;

如果此功能不正常，则可能需要检查一些导致此问题的css或任何其他框架。

Answer 8

测试css维度代码无效的原因的最佳方法是使用chrome dev工具。

如果您是safari用户，请按Shift+ Ctrl + I（或cmd + alt + I）并打开网络开发工具栏。转到元素部分，您将看到样式控制器。在样式控制器中，单击要在DOM侧检查的元素，在您的情况下，它可能是<div class="et_pb_map">...</div>，或者您可以按ctrl + f搜索et_pb_map。< / p>

完成后，您可以转到样式选项卡中的框查看器，看看它为什么没有用完。

我会说有时如果你使用填充/边距并没有很好地设置溢出属性，它会裁剪你的元素。或者也许你的班级被其他班级重叠。您可以使用嵌入样式覆盖<div class="et_pb_map" style="...">...</div>，或者只是将您的类作为类属性中的最后一个类。

Example on using chrome web dev tool bar

Answer 9

转到外观 - ＆gt;自定义 - ＆gt;额外的CSS并粘贴此代码

.et_pb_map iframe {height: 400px !important; }

这将有助于您Check this jsfiddle

Answer 10

这是唯一对我有用的解决方案。将一个类分配给您的地图模块，即.map-height并将其定位为：

.map-height .et_pb_map {
    overflow:visible;
    height: 500px!important;
}

Answer 11

简单的方法是：

转到Divi主题选项
向下滚动到自定义CSS
输入.et_pb_map {height:500px;}
点击保存更改（地图现在将更改为500px高度）

调整Divi中的地图高度

11 个答案: