我的网站上AdSense图片广告下的空白问题

Question

我正在开发一个响应式网站并面临设计问题。

在我的网页上投放图片广告时，AdSense广告下方有一个空白，而当页面宽度低于480px 时。

如何摆脱这个空白区域？

以下是classified ads website

此页面上有3个AdSense广告，只有在投放了图片广告时才会检查其中任何一个。

我在谈论这个div

<div class="banner-728">

Answer 1

您必须create a responsive ad unit才能使添加内容具有响应功能，否则无论您尝试做什么，CSS还是javascript都无法使用。

1. Create a responsive ad unit
2. How to modify your responsive ad code

更改并使用以下代码段将响应式广告单元添加到您的网站：

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Answer 2

我认为你应该限制包含广告的块的高度

Answer 3

我在网页上看不到问题。我认为你找到了解决方案：

.banners_728 {
    width: 100%;
    height: auto; /*to set the height to auto */
}

编辑1。：

试试这个，请告诉我它是否有效：

#ad_iframe{
transform: translateY(50%); /*this would set the image vertically to the middle */
}

...是的，这不会奏效。你必须通过jQuery解决它，因为它在两个iframe中。

编辑2。：

您需要添加以下JQuery（或类似的东西）：

$('#aswift_0').contents().find('#google_ads_frame1').contents().find('#ad_iframe').attr("style","transform: translateY(50%)");

编辑3。：

上述内容也不会起作用，因为iframe不在同一个域中。

我的想法是解决#ad_iframe，#google_ads_frame1的孩子，#aswift_0

的孩子

编辑4。：

或者，您可以关闭背景和边框：

@media(max-width:480px){
.banners_728 {
        width: 100%;
        height: auto;
        background-color: transparent;
        border: none;
    }
}

Answer 4

  *{
    margin:0px;
    padding:0px;
    }
  .banners_728{
    width: 100%;
    height: auto;
    padding:5px;
    }

正好提到div的高度：auto，定义预选器'* {}'然后会出现这种类型的问题。