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%;
}
}