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

时间:2017-01-10 05:23:22

标签: html css adsense

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

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

如何摆脱这个空白区域?

以下是classified ads website

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

我在谈论这个div

<div class="banner-728">

enter image description here

4 个答案:

答案 0 :(得分:2)

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

  1. Create a responsive ad unit
  2. How to modify your responsive ad code
  3. 更改并使用以下代码段将响应式广告单元添加到您的网站:

    <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>
    

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

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

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