我正在开发一个响应式网站并面临设计问题。
在我的网页上投放图片广告时,AdSense广告下方有一个空白,而当页面宽度低于480px 时。
如何摆脱这个空白区域?
此页面上有3个AdSense广告,只有在投放了图片广告时才会检查其中任何一个。
我在谈论这个div
<div class="banner-728">
答案 0 :(得分:2)
您必须create a responsive ad unit才能使添加内容具有响应功能,否则无论您尝试做什么,CSS还是javascript都无法使用。
更改并使用以下代码段将响应式广告单元添加到您的网站:
<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,定义预选器'* {}'然后会出现这种类型的问题。