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