Responsive ve important sorunu

HERKESE SELAMLAR
arkadaşlar responsivden anladığım sudur siteyi kodlarsın kodladıktan sonra @media ile boyutrlarını yazarsın 1200 992 768 576 480 bu boyutların içine girersin siteyi o boyutlara göre ayarlayıp css leri verip nasıl görünmesini istersen öyle css verip tasarlarsın, aynen böyle yaptım yaptıktan sonra important dediğim için bu boyutların içinden birinin boyutlarını algılayıp ona göre boyutlandırıyor örnek vereyim 576 px boyutta verdiğim css yi algılıyor ve 1200, 992 px boyutlarındada aynı css özelliklerini gösteriyor, yani her boyuta göre responsive yapamıyorum verdiğim boyutları algılamıyor farklı boyutlardakini uyguluyor , size bir kac sorum var responsiv yapma olayı doğrumu bu şekilde boyutlara css verip hangi boyutta nasıl görünceğini sağlamak mı , ikinci sorum sa eğer böyleyse responsive yapma bu importanttan kaynaklandıoğını düşündüğüm her hangi bir boyutta verdiğim css özelliklerini alıp diğer boyutlardada aynısını uygulama sorununu nasıl çözebilirim bu nedenden dolayı her boyutta responsiv yapamıyorum

şimdiden zaman ayırıp yardım etmeye çalışan herkese teşekkürler

Öncelikle kolay gelsin,
Important'ı doğru yerde kullandın mı bilmiyorum ama !important varolan bi stili ezmek için tercih edilir.
İstediğin boyutlarda görüntü bozulması da max-min yüzünden karışıyor olabilir.

media max 450 yazdığında 0-450px arası boyutların hepsini şöyle göster dersiniz.
media min 450 kullandığınızda da 450+ tüm boyutlarda şöyle göster dersiniz.

Durumu net anlamadığım için biraz yüzeysel oldu. Kodu görebilirsem belki yardımcı olabilirim.

öncelikle ilgi ve alakanızdan dolayı çok teşekkürler hocam
durum su hocam bir yazı var bu yazıyı @media 1200 de bottom 100de 992 de 80 de 776 da 60 da 576 da 40 bottom 40da olarak yaptım yaparkende important yaptım hepsine yapmasam calısmıyor sonra tüm boyutlaraı kontrol edeyim dedim örneğin 776 daki css özelliğini yani bottom 60 özelliğini 1200 de 992 de gösteriyor halbuki o boyutun css özelliği farklı bu nedenden dolayı responsiv yapamıyorum

Kullandığınız media kodu nasıl? Ve niye important veriyorsunuz? Normalde media kodları important vermeden çalışır ters bir şey yapmadıysanız.

Örnek olarak şöyle anlatayım.

Normalde ana kodunuzda css kodunuz böyledir #main .col-left .box ama siz media koduna gidipte #main .box yaparsanız doğal olarak css media'daki kodu değilde normal kodu algılayacaktır. O yüzden css kodu neyse media kodunda da aynısını kullanın.

Ve ayrıca @media kodlarını şu şekilde kullanın.

@media only screen and (max-width: 479px)

@media only screen and (min-width: 480px) and (max-width: 575px)

@media only screen and (min-width: 576px) and (max-width: 767px)

@media only screen and (min-width: 768px) and (max-width: 919px)

Yani birisinin bitişiyle diğerinin başlangıcı arasında hep 1px fark olsun.

öncelikle zaman ayırıp cevap verdiğiniz için teşekkürler
hocam @media screen and (max-width:992px) kod bu hocam import yapmamımn nedeni verdiğim css işlemiyor hatta başka boyutta css veririken baska bir boyuttaki importu silmem gerekiyor ,

kodlar aşşağıdaki gibi

@media screen and (max-width:768px){


.urun .fas{
font-size:25px;
position:relative;
bottom:390px !important;
left:33px;
color:#17a2b8 !important;
transition:0.5s ease;

}



.urun .indirimm{
position:relative;
bottom:360px;
left:178px !important;
z-index:100;

font-weight:900;
color:#17a2b8 !important;
background-color:#38FFD2;
padding-bottom:2px;
padding-top:2px;

border-radius:30px;
transition:1s ease;

}
.urun .ov{

}

}
.urun .indirim{
font-size:13px;

}


.urun .overlay{
position:absolute;
width:100% !important;
height:100% !important;
background-color:#17a2b8;
opacity:0;
transition:1s ease;
}


.ikinci .hediye{
font-size:30px !important;

}

.ikinci p{
font-size:12px !important;
line-height:30px;
opacity:0.7;
margin-top:50px;
}

.ucuncu .img-fluid{
max-width:1;
max-height:550px !important;
}
.ucuncu .erkek{
position:relative;
bottom:160px;

}
.ucuncu .egym{
padding:5px 11px !important;
position:relative;
bottom:120px !important;
left:80px !important;
background-color:white;
border-radius:60px;
max-width:350px !important;
margin-bottom:150px !important;

}
.ucuncu h1{
font-weight:900;
transition:0.3s ease;
}
.ucuncu h1:hover{
font-weight:900;
font-size:45px;
transition:0.3s ease;
color:#17a2b8 !important;
}
.ucuncu .bgym{
padding:5px 11px !important;
position:relative;
bottom:120px !important;
left:80px !important;
background-color:white;
border-radius:60px;
max-width:350px !important;
margin-bottom:150px !important;
}

}


@media screen and (max-width:480px){


.ucuncu .bgym{
padding:5px 11px !important;
position:relative;
bottom:100px !important;
left:33px !important;
background-color:white;
border-radius:60px;
max-width:350px !important;

}
.ucuncu .egym{
padding:5px 11px !important;
position:relative;
bottom:120px !important;
left:33px !important;
background-color:white;
border-radius:60px;
max-width:350px !important;
margin-bottom:150px !important;

}
}

@media screen and (max-width:768px)

Bu şekilde kullanım sağlamayın, az önce kod yazdım. Bu şekilde media kullanımı 768px altını işaret eder. Yani sizin 480px'de yaptıklarınız şu an için boş olur. Şu anda resmen css kodlarınız birbirleriyle çakışıyor.

media kullanımı @media only screen and (min-width: 479px) and (max-width: 767px) olmalı. Bu şekilde yaparak deneyin. Ayrıca important'ları kaldırarak deneyin.

dediğiniz gibi yaptım importantları kaldırdım işlemedi css yine important yapınca işledi css ve important yapınca diğer boyuttada aynı css işlediği için farklı görünüyor

jsfiddle üzerinden kodlarınızı bir paylaşır mısınız bakalım.

ilgi ve alakanızdan dolayı terardan size teşekkür etmek isterim bir arkadaş bostrap ile responsive kullandedi yani xs olarak yap dedi bende o sekilde yaptım hepsi için css vermeye gerk yokmus