如何使现代Flipkart横幅具有响应性

Question

我有一种情况，我想使随身卡横幅响应。

它适用于大于768像素的屏幕，但不适用于移动尺寸。

我已经尝试过该线程使横幅广告响应，但是它仅适用于较旧的横幅而不适用于新的横幅。

此处演示： https : //jsfiddle.net/hwub8sw1/

这是我尝试过的：

style.css文件

* {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;
    }

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


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

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


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

     div[data-wrid^=WRID] img {
      max-width:90% !important;    
      margin:0 auto;
    }/* smartphones, iPhone, portrait 480x320 phones */ 
}

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

     div[data-wrid^=WRID] img {
      max-width:100% !important;
      margin:0 auto;
    }
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
}
@media (min-width:641px) { 

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

     div[data-wrid^=WRID] img {
      max-width:100% !important;
      margin:0 auto;
    }
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
}

HTML

 <div data-wrid="WRID-149802169852992393" 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>

Answer 1

横幅广告的宽度是多少？ 每个max-width语句都有!important ，这实际上不是一个好习惯。 尝试删除max-width:730px !important; 。 我认为在每种情况下，它都采用这种方式，因为它不在任何min:或max:条件下，并且带有!important标签

Answer 2

使用脚本，您正在iframe内的页面上加载flipkart横幅。 而且您不能将任何自定义css或script应用于来自您域以外的任何iframe 。 有关更多信息，请参考现有答案： 如何将CSS应用于iframe？