responsive div yapımı

Arkadaşlar selamlar. bir sitede şöyle bir div yaptık. Ancak div responsive değil. küçük ekranlarda sorun yaşıyoruz. html ve css kodlarını yolluyorum. Acaba nereye müdehale etmemiz gerekir. Fikri olan var mı?

Siteyi de verebilirim.. Şimiden teşekkür ettim.

<p ><a href="#" data-reveal-id="myModal" data-animation="fade"> buton </a><br> Mimar</p>

<div style="opacity: 1; visibility: visible; top: 687px;" id="myModal" class="reveal-modal"><img class="alignleft" src="resim" alt="" height="280" width="auto">
bilgi. <a class="close-reveal-modal">×</a></div>


css kodları:


.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;

margin-top: -800px;
margin-left: -34px;
width: 800px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal img {
margin-right: 12px;
border-radius: 50%;
}

hiç fikri olan yok mu yahu

şu kodları ekleyin;

@media (max-width: 480px) { 
   /*sitenin genişliği 480'e eşit veya daha küçükse bu stiller işlenir*/
  .reveal-modal {
	 top: 0 !important; 
	 left: 0 !important;
	 margin: 0 !important;
	 width: 95%;
	 padding: 10px;
  }
}

bu şekilde tarayıcının boyutu 480'den kücükse verdiğiniz stiller işlenir

Maalesef hiçbir değişiklik olmadı. site: o-da.com.tr Soldaki menüden O'nlar sekmesinde tıklandığında Oylum Işık yazısına basın ca açılan pop-up.
o Div in içinde bir resim var width="auto"height="280" olarak sabitlenmiş. Verdiğiniz kodu bu engelliyor olabilir mi?

Teşekkürler

Hocam aslında olmuş 480px'den kücük olunca tarayıcı, şu stilden; şu stile değişiyor.
1266px

477px


ama 480px biraz az oluyor, onu 900px yapmanız lazım öyle olunca sorunsuz çalışacaktır.

@media (max-width: 900x) { 
   /*sitenin genişliği 900'e eşit veya daha küçükse bu stiller işlenir*/
  .reveal-modal {
	 top: 0 !important; 
	 left: 0 !important;
	 margin: 0 !important;
	 width: 95%;
         text-align: center;
  }
  .reveal-modal img {
        float: inherit !important;
        margin: 0 !important;
  }
}

çok teşekkürler emeğin için ama sanırsam olmadı (
telefonda tablette vs. responsive olmadı.
Birde ekranı küçülttükçe resim küçülmüyor.

hocam px yazacağıma x yazmışım, kod bu şekilde olucak;

@media (max-width: 900px) { 
 	/*sitenin genişliği 900'e eşit veya daha küçükse bu stiller işlenir*/
	.reveal-modal {
		 top: 0 !important; 
		 left: 0 !important;
		 margin: 0 !important;
		 width: 95%;
		 text-align: center;
	}
	
	.reveal-modal img {
	 	float: inherit !important;
	 	margin: 0 !important;
	    width: 100%;
	    max-width: 280px;
	}
}

bende hiç dikkat etmemişim
ÇOk teşekkürler oldu vallahi...

bende yarın kullanacagim bakalım