How to make an ad responsive

Question

This is my website: http://thelolinternet.com/

As you can see, there is an ad upside of the size height="90" width="728" but when you open the website in mobile (try changing the browser width), the ad's size does not get decreased. What is the solution?

I do not know how to make it responsive.

This is the code:

<div  data-WRID="WRID-147582892358590272" data-widgetType="Push Content"  data-class="affiliateAdsByFlipkart" height="90" width="728"></div>
<script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script>

And here is my code after the percentage suggestion:

<div data-WRID="WRID-147582892358590272" data-widgetType="Push Content" data-class="affiliateAdsByFlipkart" height="6.181318681318681%" width="50%"></div>
<script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateW‌idgets.js"></script>

And use these percentages in CSS since width/height get deprecated http://www.w3schools.com/tags/att_td_width.asp — Xenos, Oct 07 '16 at 11:57
No, it is not working. It is not making it responsive...Wait let me provide screenshot. — David bot, Oct 07 '16 at 11:59
@Davidbot Things aren't just made responsive. Percentage widths fit to the container. Maybe you need to use media queries. Can't help properly with the little information you provide — Andy Holmes, Oct 07 '16 at 12:00
Check out this screenshot : http://i.imgur.com/hH3NNky.png this is what happened, when i changed it to percentage Also, i do not have a CSS option in wordpress. I need to put @media in html, how to do it? — David bot, Oct 07 '16 at 12:01
Google on how to use media queries to alter layouts. Still can't help you. Put the code here that you tried after I suggested percent widths — Andy Holmes, Oct 07 '16 at 12:02
@AndyHolmes Same applies for div: `width` is nowhere to be found in the WHATWG living spec https://html.spec.whatwg.org/multipage/semantics.html#the-div-element — Xenos, Oct 07 '16 at 12:05
Ok, this is the solution to my question. http://stackoverflow.com/questions/35683626/make-banner-ads-responsive But wordpress is not providing me option to add CSS file , what to do? — David bot, Oct 07 '16 at 12:08

ProgramForSA · Accepted Answer · 2016-10-07T12:23:17.387

0

you can do this, test it out in your dev environment because it will not work in fiddle

device_width = window.outerWidth;
ad = document.getElementById('ad');

if (device_width == '740')
{
  ad.style.width = '700'
}
else if(device_width == '480')
{
  ad.style.width = '400'
}

<div id="ad">
  <h2>THIS IS AN AD</h2>
</div>

edited Oct 07 '16 at 12:23

answered Oct 07 '16 at 12:08

ProgramForSA

35
3

This is not responsive :/ I think this [fiddle](https://jsfiddle.net/1r1kydjz/10/) is the solution. But how ot apply it without using CSS File – David bot Oct 07 '16 at 12:12
you can use js file – ProgramForSA Oct 07 '16 at 12:14
how, i am new, sorry. – David bot Oct 07 '16 at 12:16
let me change my answer – ProgramForSA Oct 07 '16 at 12:17
ok I finished writing it, by the way is the website for a client? – ProgramForSA Oct 07 '16 at 12:28
No, it is my website, i will work on it. Where is the edited code mate? – David bot Oct 07 '16 at 12:33
its there dude, I just edited my last code, refresh ur browser – ProgramForSA Oct 07 '16 at 12:35
Sorry for late reply. It is still not responsive. Neither in your snippet code – David bot Oct 07 '16 at 12:54
do u skype, maybe I can help u better in person – ProgramForSA Oct 07 '16 at 13:08

How to make an ad responsive

1 Answers1