How to make modern flipkart banner responsive

Question

I have a situation where I want to make flipkart banner responsive.

It will work fine for screen sizes more than 768px, but it does not work for mobile sizes.

I have tried this thread Make banner ads responsive but it is only working for older banner not for new banner.

DEMO HERE: https://jsfiddle.net/hwub8sw1/

Here is what i have tried:

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>

I have locked this question because [you have been repeatedly abusing the edit system](https://stackoverflow.com/posts/45563424/revisions) to edit in and then remove nonsense. That line doesn't belong in questions *at all*, and I suspect you know that. You *certainly* shouldn't be repeatedly adding and removing it in an attempt to "bump" your question. This is an abuse of our system, and very annoying to other users. — Cody Gray - on strike, Aug 16 '17 at 05:53
You did the same thing on [this older question](https://stackoverflow.com/questions/41501261/tunneling-socket-could-not-be-established-statuscode-302), too, but no one caught you, so you're getting off with a warning this time. The next time we catch you doing this, it will come with a suspension attached. — Cody Gray - on strike, Aug 16 '17 at 05:57

score 1 · Answer 1 · answered Aug 08 '17 at 13:25

What is the width of the banner it's taking? You're having !important for every max-width statement, which is really not a good practice. Try removing max-width:730px !important; . I think for every instance its taking this, as its not under any min: or max: criteria and has an !important tag attached to it

score 0 · Answer 2 · answered Aug 11 '17 at 11:04

0

Using script you are loading flipkart banner on your page inside an iframe. And you can't apply any custom css or script to any iframe coming from other than your domain. For more refer existing answers: How to apply CSS to iframe?

answered Aug 11 '17 at 11:04

kravisingh

1,640
12
16

How to make modern flipkart banner responsive

2 Answers2