[YARDIM] Responsive banner kodu oluşturma

Merhabalar, kullandığım cloud drive scriptinde reklam ekleme bölümü var. Ancak banner reklamı eklediğimde mobilde büyük görünüyor ve sığmıyor.

İnternette 1-2 saattir araştırma yapıyorum sadece mobilde reklamı gizlemeyi başarabildim şu kodlar sayesinde;

<a href="https://yonlendirilensite.com" target="_blank"><img src="https://resimadresi.com/resim.png"></a>
</div>

<style type="text/css">
@media screen and (max-width:500px) and (min-width:100px) {
#banner{display: none;}
}

</style>

Bu kodları ekleyince mobilde reklam görünmüyor, o kısımda sadece boşluk görünüyor.

Ben ise ya masaüstünde ve mobilde görünecek bannerleri ayrı ayrı yapıp ayrı ayrı ekleyeceğim. Ya da tek bir banneri hem mobilde hem masaüstünde uyumlu şekilde göstereceğim.

İnternette araştırma yaptım ancak hep wordpress üzerinden anlatım yapılmış. Bu scriptte bir sürü .css kodları var hangisine neyi eklemem gerek anlayamadım.

Yardımcı olursanız sevinirim.

https://jsfiddle.net/8j59r7gc/