Responsive CSS Hatası

Sa arkadaşlar, sıkıntımı örnekte gösterim;

@media screen and (max-width: 480px) {
deger{width:uzunluk;} <-- 480px verdiğim değeri
}
@media screen and (max-width: 320px) {
deger{width:uzunluk;} <-- 320px değiştiremiyorum üsteki değeri alıyor
}


acaba nerde hata yapıyorum? bunun bi çözümü var mı? acilen yardımcı olursanız sevinirim... Hayrlı günler...

@media screen and (min-width: 321px) and (max-width: 480px) {
deger{width:uzunluk;} <-- 480px verdiğim değeri
}
@media screen and (max-width: 320px) {
deger{width:uzunluk;} <-- 320px değiştiremiyorum üsteki değeri alıyor
}

@media screen and (max-width: 480px) {
deger{width:uzunluk;} <-- 480px verdiğim değeri
}
@media screen and (max-width: 320px) {
deger{width:uzunluk !important;} <-- 320px değiştiremiyorum üsteki değeri alıyor
}

important değerini verirsen sorun kalmaz sanırım.

verdim olmadı...

Ek Olarak:

hocam olasın ama bu sefer tasarımda sıkıntı oluyo komple cssi gözden geçrmem gerekiyor

Ek Olarak: kodun hepsi



/* responsive_style
------------------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
#logo_kabuk{width:40%;}
#toolbar_menu{width:60%;}
.jms-dots{top:140px;}
.jms-arrows span{margin-top:-150px;z-index:1;}
.step,.step img{padding:60px 0 0 0;}
.topmenu li a{width:110px;}
#kutu_kabuk p{max-width:280px;margin:0 0 25px 1%;}
.kutu{max-width:365px;margin:0 0 0 20px;}
#icerik li{max-width:310px;height:240px;margin:15px 1px 35px 54px;}
.form{width:92%;margin:0 auto;}
.iletisim_kabuk{max-width:430px;}
.iletisim_form{max-width:330px;}
.rehberbar{z-index:1!important;}
.f_kutu{margin:15px 0 0 73px;}
}
@media screen and (max-width: 767px) {

#logo_kabuk{width:45%;}
#toolbar_menu{width:55%;}
.jms-dots{top:150px;}
.jms-arrows span{margin-top:-140px;}
.step,.step img{padding:60px 0 0 0;}
#kutu_kabuk p{max-width:260px;margin:0 0 0 1%;}
.kutu{max-width:350px;margin:20px 0 0 20px;}
#icerik li{max-width:310px;height:240px;margin:15px 1px 15px 6px;}
.topmenu{height:auto;z-index:2!important;position:relative;}.topmenu ul{display:none;height:auto;}
.topmenu a#pull{display:block;width:100%;position:relative;text-align:left;text-indent:25px;}
.topmenu a#pull:after {content:"";background:url(../_design/nav-icon.png) no-repeat;width:30px;height:30px;display:inline-block;position:absolute;right:15px;top:15px;}
.f_kutu{margin:15px 0 0 55px;}
}
@media screen and (max-width: 640px) {
#logo_kabuk{width:51%;}
#toolbar_menu{width:50%;}
.jms-dots{top:150px;}
.jms-arrows span{margin-top:-140px;}
.jms-content{margin:195px 0 0 50px;}
.step img{right:20px;top:155px;}
#kutu_kabuk p{max-width:225px;margin:0 0 0 1%;}
.kutu{max-width:300px;margin:20px 0 0 5px;}
.kutu h2{text-indent:10px;}
.kutu img{margin:0;}
.kt_icr{width:96%;}
.topmenu li{width:130px;float:left;position:relative;}
.iletisim_form{max-width:520px;}
.iletisim_kabuk{max-width:400px;margin:0 0 0 105px;}
.iletisim_kabuk li{width:96%;margin:0 0 15px 15px;line-height:36px;}
.iletisim_facebook,.iletisim_twitter{width:180px!important;margin:0 0 25px 15px!important;}
#icerik li{max-width:310px;height:240px;margin:15px 1px 35px 150px;}
.f_kutu{max-width:295px;margin:15px 0 0 10px;}
}
@media screen and (max-width: 480px) {
#hayat h1{font-size:110%;}
#logo_kabuk{width:100%;}
#toolbar_menu{width:100%;top:90px}
.rehberbar{width:94%;margin:110px 0 0 0;z-index:1!important;}
#filter{margin:140px 0 5px 0;}
.jms-dots{top:210px;}
.jms-arrows span{margin-top:-40px;}
.step,.step img{padding:130px 0 0 0;}
.jms-arrows span.jms-arrows-prev{top:45%;left:7%;}
.jms-arrows span.jms-arrows-next{top:45%;right:7%;}
#icerik li{max-width:310px;height:240px;margin:15px 1px 15px 23px;}

#kutu_kabuk p{max-width:275px;}
.kutu{max-width:400px;margin:20px 0 0 55px;}
.kutu h2{text-indent:10px;}
.kt_icr{width:96%;}

.form{width:92%;margin:0 auto;}
.yorum_form,.iletisim_form{max-width:480px;}
.iletisim_kabuk li{margin:0 0 15px 15px;line-height:36px;}
.btn{max-width:380px;}

#toolbar_menu img{display:none;}
.topmenu a#pull{border:solid #d3042f;border-width:1px 0;}
.f_kutu{margin:15px 0 0 55px;}
}

@media screen and (max-width: 320px) {
.topmenu li{width:200px!important;float:left;position:relative;}
#filter{margin-top:50px;}
#icerik h2{margin:80px 0 20px 0;}
#icerik li{margin:15px 1px 15px 4px;}

#kutu_kabuk p{max-width:255px;}
.kutu{max-width:300px;margin:20px 0 0 15px;}
.kutu h2{text-indent:10px;}
.kt_icr{width:96%;}

.referans_resim{margin:75px 0 0 0;}.referans_detay h2{width:90%;margin:21px auto 15px auto;}.referans_detay p{width:90%;}.referans_gor{margin:5px 0 5px 0;}
.flexslider{margin:95px 0 25px 0 !important;}
.sayfabasi{width:41px;height:73px;position:fixed;top:7%;right:1%;z-index:9!important;}
.urun_detay p{width:90%;margin:0 auto 15px auto;text-indent:15px;}
.urun_detay ul li{width:95%;margin:0 auto;}
.solbar,.urun_sol{margin-left:35px;}
.tab_ozellik{margin:0 0 15px 35px;}
.tab_yorum{margin:0 0 15px 0;}
.form{width:92%;margin:0 auto;}
.f_kutu{margin:15px 0 0 0;}
}

Açıklama yazdım ama dönüp dolaşınca sorununu anlayamadığımı farkettim. Kendim için hazırladığım bir responsive örneği. İstersen birde bunları dene. Belki karşılaştırınca farkı görebilirsin.
Buradaki max-width:940px'in anlamı = tarayıcı 940 pikselden daha küçük olursa aşağıdak değeri uygula demek oluyor. Benim kullandığım yüzdelik değer senin kullandığın 320px. İstersen birde yüzdelik oranlarla yapmayı dene. Belki sebebi budur.
@media screen and (max-width: 940px) {
#icerikSol {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
}
@media screen and (max-width: 650px) {
.yaziKutusu {
float: left;
clear: left;
min-width:300px;
margin: 0 0 10px;
width: 100%;
}
}

hocam ilgini için teşkr edrim... sorun ölçü değerlerde değil,sorun 320px ekran çözünürlüğünde bile 640px ekran değeriyimş gibi davranıp 320px değerleri yok sayması :(

Asıl css değerlerin böylemi peki ?
seninDeger {
width:auto;
min-width:320px;
}

Max-width leri min-width e çevirip dene.