使横幅广告响应 [英] Make banner ads responsive

问题描述

友！我正在为我的网站添加横幅广告，我已添加到显示横幅的html位于 https：// jsfiddle.net/1r1kydjz/2/

 < div data-wrid =WRID-145664652759935473data- widgettype =staticBannerdata-responsive =yesdata-class =affiliateAdsByFlipkartheight =90width =728style =text-align：center;>< / div> 
< script async src =// affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js\">< ;; script> 
  

我面临的问题是我的横幅广告没有响应，我希望它们根据移动设备，桌面设备和平板电脑。

我尝试了宽度：100％和其他提到的内容，但它没有帮助。

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

请让我知道是否有任何我可以参考的帖子。 更新小提琴 - https://jsfiddle.net/1r1kydjz/10/

  * {margin：0; padding：0;} 
 
 div [data-wrid ^ = WRID] {
 margin：0 auto; 
最大宽度：100％！重要; 
} 
 
 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/

  div [data-wrid ^ = WRID] {
 margin：0 auto; 
 width：727px; 
最大宽度：100％！重要; 
} 
 
 div [data-wrid ^ = WRID] img {
 max-width：100％！important; 
} 
 
 iframe {
最大宽度：100％！important; 
} 
  

希望有帮助！

Friends! I am working on adding banner ads to my website, the html that I have added to display banner is on 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>

The problem that I am facing is that my banner ads are not responsive, I want them to adjust according to the device i.e mobile, desktops and tablet.

I have tried width: 100% and other things mentioned, but it doesn't help.

Please note that the banner ad is inside a dynamically created iframe.

Please let me know if any post that I can refer to.

Thanks in advance.

解决方案

Updated fiddle - 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;
    }
}

try this - 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;
}

hope that helps!

这篇关于使横幅广告响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！