如何使現代flipkart橫幅響應

我有一個情況，我想使flipkart橫幅響應。如何使現代flipkart橫幅響應

對於超過768px的屏幕尺寸，它可以正常工作，但不適用於手機尺寸。

我已經試過這個線程Make banner ads responsive但它只適用於舊的橫幅不適用於新的橫幅。

DEMO的位置：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>

來源

2017-08-08 EaB

我已經鎖定了這個問題，因爲[你一直在濫用編輯系統]（https://stackoverflow.com/posts/45563424/revisions）編輯，然後刪除廢話。這條線不屬於問題*，我懷疑你知道這一點。你*當然*不應該反覆添加和刪除它，試圖「碰撞」你的問題。這是對我們系統的濫用，對其他用戶非常惱人。 –

你在[這個老問題]上做了同樣的事情（https://stackoverflow.com/questions/41501261/tunneling-socket-could-not-be-established-statuscode-302），但沒有人抓到你，所以這次你會發出警告。下一次，我們抓住你這樣做，它會附帶暫停。 –

它所用橫幅的寬度是多少？對於每個最大寬度語句，您都有!important，這實際上不是一個好習慣。嘗試刪除max-width:730px !important;。我想對於每個實例其採取這一點，因爲它不是在任何min:或max:標準，並附加了

來源

2017-08-08 13:25:02

使用腳本，您在您的網頁上加載iframe內flipkart旗幟的!important標籤。而且，您不能將任何自定義css或script應用於來自域以外的任何iframe。對於更多的參考現有答案：How to apply CSS to iframe?

來源

2017-08-11 11:04:31 kravisingh

如何使現代flipkart橫幅響應

回答

相關問題