页脚不使用全宽显示谷歌地图 iframe

Question

我正在使用wordpress 和Better Health 主题。

我正在尝试在页脚区域添加嵌入谷歌地图iframe，但即使我设置了宽度和高度，地图显示如下：

你能帮帮我吗？

这是我的iframe：

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6523.972232754733!2d33.313468!3d35.156967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2sus!4v1525091450028" width="800" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

这是我的页脚 CSS：

/************************************
16)Footer top
*************************************/
.footer-top {
    padding: 0 0 25px;
    background-color: #1a1e21;
    color: #7e7e7e;
    font-size: 14px !important;
}

.footer-top p {
    font-size: 14px;
    margin-bottom: 0;
}

.footer-top-box {
    margin: 30px auto;
    overflow: hidden;
}

.footer-top h4 {
    color: #fff;
    text-transform: capitalize;
}
.footer-top-box li{
    padding: 5px 0 10px 0;
    border-bottom: 1px dotted #333;
}
.footer-top-box li:last-child{
    border-bottom: 0!important;
}
.footer-top-box h5{
    margin-bottom: 5px;
}
.footer-top-box .widget-img-thumb {
    display: inline-block;
    float: left;
    margin-right: 15px;
    width: 60px;
}

.footer-top-box .widget-content {
    overflow: hidden;
}
.footer-top-box .widget-date{
    font-size: 12px;
}
.footer-top .input-holder {
    position: relative;
}

.footer-top .input-holder input[type="email"] {
    width: 100%;
    display: inline-block;
    border: 0;
    border-radius: 0;
    height: 39px;
    padding: 10px 20px;
}

.footer-top .input-holder label {
    position: absolute;
    top: 0;
    right: -4px;
    text-align: center;
    cursor: pointer;
}

.footer-top .input-holder label i {
    position: absolute;
    top: 9px;
    left: 8px;
    font-size: 20px;
    color: #fff;
}

.footer-top .input-holder input[type="submit"] {
    color: #fff;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 20px;
    line-height: 0;
    text-indent: -999px;
}

.footer-top .submit-bgcolor {
    background-color: #00aef0;
}

.footer-top ul {
    list-style-type: none;
    padding-left: 0;
}

.footer-top ul li {
    margin: 0 0 10px 0;
}

.footer-top ul li a {
    color: #7e7e7e;
}

.footer-top ul li a:hover {
    color: #fff;
}

.tag a {
    margin: 5px;
    color: #7e7e7e;
    padding: 5px;
    float: left;
    border: 1px solid #7e7e7e;
}

.tag a:hover {
    color: #fff;
    border: 1px solid #fff;
}

这是我的html 代码：

<section id="text-6" class="widget widget_text">            <div class="textwidget"><p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d6523.972232754733!2d33.313468!3d35.156967!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x552d685f196ffa7c!2zzpnOkc6kzqHOmc6azp8gzprOlc6dzqTOoc6fICLOnyDOkc6gzp_Oo86kzp_Om86fzqMgzpvOn86lzprOkc6jIg!5e0!3m2!1sen!2sus!4v1525091450028" frameborder="0" style="border:0" allowfullscreen></iframe></p>
</div>
        </section> 

Answer 1

将提供的内容添加到您的自定义 > 附加 Css 中（或添加到某些 .css 文件中，添加到主题的选项自定义 css 部分或类似的地方）：

#text-6 iframe {
   height: 450px;
   width: 800px;
}