-1

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.

Alok Gupta
  • 1,353
  • 1
  • 13
  • 29
  • Instead of using CSS (using `width:100%`), there are the attributes `width` and `height`; have you tried changing those? – Jonathan Lam Feb 28 '16 at 14:25
  • Yes, when I do that alignment of banner gets impacted or banner does not display at all. I have updated the css of my banner ad in jsfiddle – Alok Gupta Feb 28 '16 at 14:26

2 Answers2

1

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!

Saeed Salam
  • 467
  • 3
  • 8
  • It makes the ad responsive but the alignment is affected. – Alok Gupta Feb 28 '16 at 15:14
  • I saw that, still it is not central aligned. But I guess that's not a big issue, I will try to figure it out. Thanks for the solution to make it responsive. – Alok Gupta Feb 28 '16 at 15:35
  • it seems center-aligned here - https://jsfiddle.net/1r1kydjz/10/ which browser are you using? – Saeed Salam Feb 28 '16 at 15:37
  • am too on chrome, seeing like this here - http://s18.postimg.org/plte7fzt5/screen.png can you share a screenshot? – Saeed Salam Feb 28 '16 at 15:43
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104791/discussion-between-saeed-salam-and-alok-gupta). – Saeed Salam Feb 28 '16 at 15:44
0

If you know all possible size of your site you can define scale of the banner and then use transform:scale with Media Queries.

ri0ter
  • 61
  • 5