如何使現代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？