使横幅广告具有响应性

2023-12-26

朋友们!我正在努力向我的网站添加横幅广告,我添加的用于显示横幅的 html 已打开https://jsfiddle.net/1r1kydjz/2/ https://jsfiddle.net/1r1kydjz/2/

<div data-wrid="WRID-145664652759935473" data-widgettype="staticBanner" data-responsive="yes" data-class="affiliateAdsByFlipkart" height="90" width="728" style="text-align:center;"></div>
<script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script>

我面临的问题是我的横幅广告没有响应,我希望它们根据设备(即移动设备、台式机和平板电脑)进行调整。

我尝试过 width: 100% 和提到的其他内容,但没有帮助。

请注意,横幅广告位于动态创建的 iframe 内。

如果有我可以参考的帖子,请告诉我。

提前致谢。


更新了小提琴 -https://jsfiddle.net/1r1kydjz/10/ https://jsfiddle.net/1r1kydjz/10/

* {margin:0; padding:0;}

div[data-wrid^=WRID] {
    margin: 0 auto;
    max-width:100% !important;
}

div[data-wrid^=WRID] img {
  max-width:100% !important;
  margin:0 auto;
}

iframe {
  max-width:730px !important;
     text-align:center !important;
     margin:0 auto;
}

@media (max-width:730px) {
    iframe {
      max-width:100% !important;
    }
}



尝试这个 -https://jsfiddle.net/1r1kydjz/5/ https://jsfiddle.net/1r1kydjz/5/

div[data-wrid^=WRID] {
    margin: 0 auto;
    width: 727px;
    max-width:100% !important;
}

div[data-wrid^=WRID] img {
  max-width:100% !important;
}

iframe {
  max-width:100% !important;
}

希望有帮助!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使横幅广告具有响应性 的相关文章