Akıllı Cep telefonlarının yaygınlaşması ile birlikte bunlara uyumlu temalar ve tema içerisinde yeralan bileşenlerinde boyut değişikliklerine uyum sağlayabilmeleri (yani bunlarda boyut

değiştirecek) konusu önem kazandı bu bağlamda responsive (uyumlu) temalar popülerlik kazandı gel gelelim her ekrana uyum sağlayan bu temalar yaygınlaştıkça başka sorunlar gündeme geldi mesela web sayfalarının varlıklarını devam ettirebilmeleri için olmazssa olmazı olan reklam bannerleri ve bunların boyut değişikliklerine uyumu ; en basitinden Milyar dolarlık Google bile buna bir çözüm bulamadı , beta olarak sözde duyarlı reklam birimleri yayımlamaya başladı lakin bunlar cep telefonlarını ve tabletleri algılayıp reklamların boyutlarını ona göre değiştirse de Normal bir bilgisayarda gösterdiği reklam boyutunu tarayıcı boyutu ile birlikte değiştiremiyor bu durumda saçma sapan bir görünüme neden oluyor , Aslında çözümü olsada Googlenin; kodlara dokunulmaması konusundaki hassasiyeti webmasterları zor durumda bırakıyor Bu yazımızda eğer websayfanızda adsense dışında bir reklam banneri kullanıyor ve boyut değişikliğine duyarlı olmasını istiyorsanız faydalanabileceğiniz bir Css tekniği anlatılmaktadır , Ben örnek olması açısından Uygulamayı wordpress te yapacağım :

1. Tema klasörünüzde (aşağıdaki yol)

wp-content\themes\Tema isminiz

eğer var ise custom.css yok ise style.css ye aşağıdaki kodları yapıştırın:

#logo-container img {
   max-width: 100%;
   height: auto;
}

Nereye yapıştıracağım derseniz , en sona yapıştırmanız işimizi görecektir

2. Sonrasında Banneri sitenizin neresine yerleştirecekseniz başına ve sonuna üstteki Css kodunu çağıracak şekilde aşağıdaki kodları kullanmanız gerekir

<div id="logo-container"> banner kodunuz burada </div>

mesela ben Bilgisayarımdaki serverde aşağıdaki kodu kullandım

<center><div id="logo-container"><img border="0" src="https://127.0.0.1/wp-content/uploads/2014/12/reklam.png" width="768" height="90"></div></center>

Üstteki kodlarla oluşturduğum sayfayı tarayıcıda küçülterek ekran görüntüsü aldım (Aşağıdaki resim)

Bu yöntem ile istenen sayfadaki bannerler tema ile birlikte şekil değiştirip her cihazla uyumlu hale gelecektir. Eğer ben bunu normal bir Html ile oluşturulmuş sayfamda nasıl uygularım diyorsanız Buradaki örneği inceleyebilirsiniz